阅读 1013

webpack用法小结

1、webpack是什么

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

2、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'
        }
    }
复制代码

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

2.2output

  • 打包成的文件
  • 一个或多个
module.exports = {
 entry:{
 index:'index.js',
 b:'b.js'
 },
 output:{
     path:path.resolve(__dirname,'dist'),
     filename:'[name].min.[hash:5].js'
 }
}
复制代码

在上面的例子中,

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

2.3loader

  • 作用: 通过使用不同的Loader,Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、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

3、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单独提取出来

    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这些前缀

  • Trident内核:主要代表为IE浏览器, 前缀为-ms

  • Gecko内核:主要代表为Firefox, 前缀为-moz

  • Presto内核:主要代表为Opera, 前缀为-o

  • 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其它用法可以参考文档

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'))
+ }),
复制代码

4、总结

以上是webpack核心概念总结,对概念的理解,有助于总体了解下webpack不同的作用,遇到相关问题,找对应的模块。
复制代码
文章分类
前端
文章标签