webpack用法小结

时间 2019-11-06

标签 webpack 用法小结繁體版

原文原文链接

一、webpack是什么

根据文档的定义：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。css

二、webpack四个核心概念

入口(entry) 入口，webpack 执行构建的第一步将从 Entry 开始，可抽象成输入
输出(output) 输出结果，在 Webpack 通过一系列处理并得出最终想要的代码后输出结果
加载器(loader) 模块转换器，用于把模块原内容按照需求转换成新内容。
插件(plugins) 扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件能够监听这些事件的发生，在特定时机作对应的事情。

2.1entry

定义的三种方法

第一种用法
    module.exports = {
        entry:'index.js'
    }
第二种用法    
    module.exports = {
        entry:['index.js','b.js']
    }
第三种用法    
    module.exports = {
        entry:{
          index:'index.js',
          b:'b.js'
        }
    }
复制代码

推荐使用使用第三种方法，方便分清各个入口的定义html

2.2output

打包成的文件
一个或多个

module.exports = {
 entry:{
 index:'index.js',
 b:'b.js'
 },
 output:{
     path:path.resolve(__dirname,'dist'),
     filename:'[name].min.[hash:5].js'
 }
}
复制代码

在上面的例子中，node

output中的name和entry中的key相对应
output的filename能够指定hash。有两个值能够选择：
- [hash]：hash值是特定于整个构建过程的。
- [chunkhash]：hash值是特定于每个文件的内容的。
  咱们理想的缓存设计是，在一次版本更新(从新构建)后，只有当一个文件的内容确实发生了变化，它才须要被从新下载，不然应使用缓存。所以，以上两个值中更推荐的是[chunkhash]。你也能够阅读这篇官方的缓存指南了解更多细节。

2.3loader

做用：经过使用不一样的Loader，Webpack能够要把不一样的文件都转成JS文件,好比CSS、ES6/七、JSX等
参数
- test：匹配处理文件的扩展名的正则表达式
- use：loader名称，就是你要使用模块的名称
- include/exclude:手动指定必须处理的文件夹或屏蔽不须要处理的文件夹
- query：为loaders提供额外的设置选项下面以css-loader为例

module: {
+        rules:[
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader'],
+                include:path.join(__dirname,'./src'),
+                exclude:/node_modules/
+            }
+        ]
   },  
复制代码

经常使用的loader
- 编译相关
  babel-loader ts-loader
- 样式相关 style-loader css-loader less-loader postcss-loader
- 文件相关 file-loader url-loader

2.4plugins

参与打包的整个过程
打包优化和压缩
配置编译时的变量
用法(以压缩js插件为例)

module.exports = {
    plugins: [
        new UglifyjsWebpackPlugin()
        ]
    }
复制代码

经常使用的plugin
- 优化相关
  - CommonsChunkPlugin
  - UglifyjsWebpackPlugin
- 功能相关
  - ExtractTextWebpackPlugin
  - HtmlWebpackPlugin
  - HotModuleReplacementPlugin
  - CopyWebpackPlugin

三、wbpack的经常使用配置

3.1配置开发服务器

npm i webpack-dev-server -D
复制代码

+ devServer:{
+        contentBase:path.resolve(__dirname,'dist'),
+        host:'localhost',
+        compress:true,
+        port:8080
+ }
复制代码

contentBase 配置开发服务运行时的文件根目录
host：开发服务器监听的主机地址
compress 开发服务器是否启动gzip等压缩
port：开发服务器监听的端口

3.2自动产出html

npm i html-webpack-plugin -D
复制代码

plugins: [
+        new HtmlWebpackPlugin({
+       minify: {
+            removeAttributeQuotes:true
+        },
+        hash: true,
+        template: './src/index.html',
+        filename:'index.html'
    })]
复制代码

minify 是对html文件进行压缩，removeAttrubuteQuotes是去掉属性的双引号
hash 引入产出资源的时候加上哈希避免缓存
template 模版路径

3.3分离css

由于CSS的下载和JS能够并行，当一个html文件很大的时候，咱们能够把css单独提取出来react

npm install --save-dev extract-text-webpack-plugin
复制代码

module: {
+        rules:[
+            {
+               test:/\.css$/,
+                use: ExtractTextWebpackPlugin.extract({
+                    use:'css-loader'
+                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
+            }
+        ]
    },
     plugins: [
+        new ExtractTextWebpackPlugin('css/index.css')]
    
复制代码

3.4编译less 和 sass

npm i less less-loader -D
npm i node-saas sass-loader -D
复制代码

const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');

 {
                test:/\.less$/,
                use: lessExtract.extract({
                    use:['css-loader','less-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test:/\.scss$/,
                use: sassExtract.extract({
                    use:['css-loader','sass-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
复制代码

3.5处理CSS3属性前缀

为了浏览器的兼容性，有时候咱们必须加入-webkit,-ms,-o,-moz这些前缀webpack

Trident内核：主要表明为IE浏览器, 前缀为-msgit
Gecko内核：主要表明为Firefox, 前缀为-mozgithub
Presto内核：主要表明为Opera, 前缀为-oweb
Webkit内核：产要表明为Chrome和Safari, 前缀为-webkit正则表达式
```
npm i postcss-loader autoprefixer -D 
复制代码
```

module.exports={
    plugins:[require('autoprefixer')]
}
{
                test:/\.css$/,
                use: cssExtract.extract({
+                   use:['css-loader','postcss-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
复制代码

postcss-loader其它用法能够参考文档npm

3.6转义ES6/ES7

Babel实际上是一个编译JavaScript的平台,能够把ES6/ES7,React的JSX转义为ES5

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
复制代码

{
        test:/\.jsx?$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["env","stage-0","react"]
            }
        },
        include:path.join(__dirname,'./src'),
        exclude:/node_modules/
        },
复制代码

3.7调试打包后的代码

webapck经过配置能够自动给咱们sourcemaps文件，map文件是一种对应编译文件和源文件的方法

source-map 把映射文件生成到单独的文件，最完整最慢
cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列

module.exports = {
    devtool:'eval-source-map'
}

复制代码

3.8watch

当代码发生修改后能够自动从新编译

new webpack.BannerPlugin(''),

 watch: true,
    watchOptions: {
        ignored: /node_modules/, //忽略不用监听变动的目录
        aggregateTimeout: 500, //防止重复保存频繁从新编译,500毫米内重复保存不打包
        poll:1000 //每秒询问的文件变动的次数
    },
复制代码

3.9拷贝静态文件

有时项目中没有引用的文件也须要打包到目标目录

npm i copy-webpack-plugin -D
复制代码

new CopyWebpackPlugin([{
            from: path.join(__dirname,'public'),//静态资源目录源地址
            to:'./public' //目标地址，相对于output的path目录
        }]),
复制代码

3.10打包先清空

npm i  clean-webpack-plugin -D
复制代码

new cleanWebpaclPlugin(path.join(__dirname,'dist'))
复制代码

3.11压缩js /css

压缩JS可让输出的JS文件体积更小、加载更快、流量更省，还有混淆代码的加密功能 npm i uglifyjs-webpack-plugin -D plugins: [ new UglifyjsWebpackPlugin(),
webpack能够消除未使用的CSS，好比bootstrap中那些未使用的样式
```
npm i -D purifycss-webpack purify-css
npm i bootstrap -S
复制代码
```

{
                test:/\.css$/,
                use: cssExtract.extract({
                    use: [{
                         loader: 'css-loader',
 +                       options:{minimize:true}
                    },'postcss-loader']
                }),
            },
复制代码

+ new PurifyCSSPlugin({
+             //purifycss根据这个路径配置遍历你的HTML文件，查找你使用的CSS
+            paths:glob.sync(path.join(__dirname,'src/*.html'))
+ }),
复制代码

四、总结

以上是webpack核心概念总结，对概念的理解，有助于整体了解下webpack不一样的做用，遇到相关问题，找对应的模块。
复制代码