webpack 知识点总结

1 webpack 的不同点：

　　1.1 实现代码分割

　　1.2 loaders

　　1.3 plugin system

2 webpack 打包css，需要使用css-loaders 使webpack识别css文件，第二步需要使用style-loaders使css文件可以加载到html中的style

3 Babel配置选项非常多，单一的在webpack.config.js中进行配置，会使文件太复杂，可以把Babel的配置放在.babelrc文件中进行单独配置，webpack.config.js会自动调用.babelre中的babel配置选项

4 webpack.config.js是webpack的默认配置文件，打包时会自动调动，可以使用 webpack -config 自定义设置webpack的配置文件

5 PostCSS，我们使用PostCSS来为css代码自动添加适应不同浏览器的css前缀。需要安装postcss-loader autoprefixer

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

6 HtmlWebpackPlugin 这个插件是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新的index.html.这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

新建一个index.html的模板文件，比如是index.tmpl.html

修改webpack.config.js配置文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    plugins: [
　　　　...
        new HtmlWebpackPlugin({
            template: __dirname + "index.tmpl.html"
        })
    ],
};

在编译过程中index.html会根据index.tmpl.html模板生成最终的html页面

7 热加载模板

1 在webpack配置文件中添加HMR插件

2 在Webpack Dev Server中添加“”hot“参数

8 一些优化插件

occurenceOrderPlugin:为组件分配id，通过这个插件webpack可以分析和优先考虑使用最多的模板，并未它们分配最小的ID

UglifyJsPlugin:压缩js代码

ExtractTextPlugin:分离css和js文件

（

new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")

）

9 clean-webpack-plugin 每次打包修改的文件会生成不同的打包文件，clean-webpack-plugin 可以清除残余的文件

10 使用loaders

Loaders特性

loader支持链式传递。能够对资源使用流水线。一组链式的loader将按照相反的顺序执行。loader链中的第一个loader返回值给下一个loader。在最后一个loader，返回webpack所预期的JavaScript。

loader可以是同步的，也可以是异步的。

loader运行在Node.js,并且能够执行任何可能是操作

loader接收查询参数。用于对loader传递配置

loader也能够使用options对象进行配置

除了使用package.json常见的main属性，还可以将普通的npm模板导出为loader，做法是在package.json里定义一个loader字段

插件可以为loader带来更多特性

loader能够产生额外的任意文件

什么是webpack 模块

对比Node.js模块，webpack模块能够以各种方式表达他们的依赖关系，几个例子如下：

1 ES2015 import语句

2 CommonJS require()语句

3 AMD define和require语句

4 css/sass/less文件中的@import语句

5 样式url(...)或HTML文件（<img src=...>）中的图片链接