webpack 前端构建

一、建立简单的项目目录

1、创建 manager 根目录(作为项目根目录)
2、执行 npm init，在根目录manager下自动生成 package.json文件
3、npm install webpack --save-dev，在项目中安装 webpack npm包
4、在根目录下 创建 webpack.config.js，所有的配置代码都写在里面
5、在根目录创建 src 目录，包含 html目录 > index.html，css目录 > index.css，js目录 > index.js，images目录 > index...

如图：

二、配置webpack.config.js文件

1、简单配置及使用

module.exports = {
    entry: {
        ‘js/index‘: ‘./src/js/index.js‘
    },
    output: {
        path: ‘./build‘,
        filename: ‘[name].js‘
    }
};

执行构建命令：./node_modules/webpack/bin/webpack.js

ok，生成下图的目录结构了

2、安装，使用html-webpack-plugin插件

上一步我们通过构建，在根目录下生成了 ./build/js/index.js 文件，我们希望 生成 ./build/html/index.html 文件
首先安装一下插件 npm install html-webpack-plugin --save-dev，再来看看我们的配置代码

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var plugins = [];

plugins.push(
    new HtmlWebpackPlugin({
        template: ‘./src/html/index.html‘,
        filename: ‘html/index.html‘,
        inject: ‘body‘,
        hash: true, // index.js?hash
        cache: true, // if true (default) try to emit the file only if it was changed.
        showErrors: true, // if true (default) errors details will be written into the html page.
        chunks: [‘js/index‘] // filter chunks
    })
);

module.exports = {
    entry: {
        ‘js/index‘: ‘./src/js/index.js‘
    },
    output: {
        path: ‘./build‘,
        filename: ‘[name].js‘
    },
    plugins: plugins
};

执行构建命令：./node_modules/webpack/bin/webpack.js后

打开./build/html/index.html文件，发现html中自动加上了script标签，引用的js路径加上了hash值，是不是感觉很赞
<script type="text/javascript" src="../js/index.js?f5f204be195973d9d81c"></script>

构建后的项目目录如图：

3、配合babel编译器，让我们所写的js代码支持es6语法

babel官网地址：https://babeljs.io/

安装babel编译器
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-es2015

在根目录下创建 .babelrc 配置文件

{
  "presets": ["es2015"]
}

webpack.config.js配置如下：

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var plugins = [];
var loaders = [
   { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
   { test: /\.css$/, loader: "style-loader!css-loader" }
];

plugins.push(
    new HtmlWebpackPlugin({
        template: ‘./src/html/index.html‘,
        filename: ‘html/index.html‘,
        inject: ‘body‘,
        hash: true, // index.js?hash
        cache: true, // if true (default) try to emit the file only if it was changed.
        showErrors: true, // if true (default) errors details will be written into the html page.
        chunks: [‘js/index‘] // filter chunks
    })
);

module.exports = {
    entry: {
        ‘js/index‘: ‘./src/js/index.js‘
    },
    output: {
        path: ‘./build‘,
        filename: ‘[name].js‘
    },
    module: {
        loaders: loaders
    },
    plugins: plugins
};

准备好了，我们在 ./src/js/index.js文件中写入：

function testEs6(a, ...args) {
    console.log(args); // [2,3,4]
}

testEs6(1,2,3,4);

console.log(Set);
console.log(Map);

new Promise(function(resolve, reject) {});

执行构建命令：./node_modules/webpack/bin/webpack.js，OK，编译成功了，并没有报错，这意味着你可以在你的项目中使用es6了

4、css文件可以作为模块在js中被引入

npm install css-loader --save-dev
npm install style-loader --save-dev

在webpack.config.js文件中配置

var loaders = [
   { test: /\.css$/, loader: "style-loader!css-loader" }
];

在./src/js/index.js中 引入css文件

require(‘../css/index.css‘);

执行构建命令：./node_modules/webpack/bin/webpack.js，可以看到 ./src/css/index.css中的css代码 放在了./build/html/index.html文件的style标签内

5、本地服务 webpack-dev-server

npm install --save-dev webpack-dev-server

执行服务启动命令：./node_modules/.bin/webpack-dev-server --progress --host 0.0.0.0 --port 8080 --colors --inline --hot --display-error-details --content-base src/

你可以通过浏览器输入下面地址来访问你的项目：
http://0.0.0.0:8080/html
localhost:8080/html
你的ip:8080/html

ok，也可以通过配置 webpack.config.js

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var plugins = [];
var loaders = [
   { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
   { test: /\.css$/, loader: "style-loader!css-loader" }
];

plugins.push(
    new HtmlWebpackPlugin({
        template: ‘./src/html/index.html‘,
        filename: ‘html/index.html‘,
        inject: ‘body‘,
        hash: true,
        cache: true,
        showErrors: true,
        chunks: [‘js/index‘]
    })
);

module.exports = {
    entry: {
        ‘js/index‘: ‘./src/js/index.js‘
    },
    output: {
        path: ‘./build‘,
        filename: ‘[name].js‘
    },
    devServer: {
        progress: true,
        host: ‘0.0.0.0‘,
        port: 8080,
        colors: true,
        inline: true,
        // hot: true,
        contentBase: ‘./src‘,
        displayErrorDetails: true
    },
    module: {
        loaders: loaders
    },
    plugins: plugins
};

配置完了后，我们 在执行命令 ./node_modules/.bin/webpack-dev-server，ok，成功了
我们随便修改一下 ./src/html/index.html代码（也可以修改css,js代码），浏览器页面将会自动刷新，实时预览，神奇吧....

6、多文件自动构建

// webpack.config.js

var glob = require(‘glob‘);
var path = require(‘path‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var source = getSource();

var loaders = [
   { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
   { test: /\.css$/, loader: "style-loader!css-loader" }
];

var plugins = (function() {
    var arr = [];

    source.htmlFiles.forEach(function(htmlFile) {
        arr.push(
            new HtmlWebpackPlugin({
                template: htmlFile.pageSource,
                filename: htmlFile.filename,
                inject: ‘body‘,
                hash: true,
                cache: true,
                showErrors: true,
                chunks: [htmlFile.jsChunkName]
            })
        );
    });

    return arr;
}());

module.exports = {
    entry: source.entry,
    output: {
        path: ‘./build‘,
        filename: ‘[name].js‘
    },
    devServer: {
        progress: true,
        host: ‘0.0.0.0‘,
        port: 8080,
        colors: true,
        inline: true,
        hot: true,
        contentBase: ‘./src‘,
        displayErrorDetails: true
    },
    module: {
        loaders: loaders
    },
    plugins: plugins
};

function getSource() {
    var source = {
        htmlFiles: [],
        entry: {}
    };

    var pageSource = glob.sync(‘./src/html/*.html‘);
    var jsSource = glob.sync(‘./src/js/**/*.js‘);
    var entry = {}; // 存储 all

    jsSource.forEach(function(item) {
        entry[‘js/‘ + path.basename(item, ‘.js‘)] = item;
    });

    pageSource.forEach(function(page) {
        var jsChunkName = ‘js/‘ + path.basename(page, ‘.html‘);
        source.htmlFiles.push({
            filename: ‘html/‘ + path.basename(page),
            pageSource: page,
            jsChunkName: jsChunkName
        });

        source.entry[jsChunkName] = entry[jsChunkName];
    });

    return source;
}

ps：转载请注明出处：杨君华

时间： 2024-10-12 16:30:04

webpack 前端构建的相关文章

webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

webpack前端构建工具学习总结（三）之webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件. webpack文档:https://webpack.github.io/docs/ 1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpac

如何用webpack实现自动化的前端构建工作流

什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,css,甚至img加hash值,以避免浏览器缓存,自动合并压缩代码,自动刷新实时预览效果(甚至免刷新),可以按照自己喜欢的目录结构存放原始资源文件,为了方便手机等访问,不需要搭建apache.nginx等服务器实现http访问...... 如何快速开始 首先 git clone https://gith

前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !important;} 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原

前端构建的初步尝试

前言 这篇文章的主要目的是告诉大家,构建工具可以做那些事情.大家不必去深入研究这个东西.最基本的是有个概念. 什么是前端构建? 在平时我们浏览一些大型的站点,会发现其中的一些css经过压缩(去掉了空白符,注释),js经过了混淆和压缩.一些引用的文件的链接会加上奇怪的字串(文件md5),例如: <link rel="stylesheet" href="/css/popModal-5c7f30ff2b.css" type="text/css"

D1.1.利用npm（webpack）构建基本reactJS项目

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

记学习前端构建工具gulp的过程，略心酸

初学前端的时候就听过友人说,前端不好学,很多软件都是要自己下载安装插件的,当时是很不以为然的,不就是下载几个软件外加安装插件吗?!怎么会很难呢!后面才发现自己真的错了. 今天刚好准备好好看看前端构建工具gulp的使用,于是乎就各种上网查资料.刚开始的时候有点摸不着头脑,这个东西不是一个软件,拿来就用,需要自己配置环境,自己根据需求安装package,完全是自己DIY的一个工具. 下面就把整个安装过程,记录下来,方便以后查看吧. 先明确几个概念:1.gulp是基于node.js环境下工作的:2.命