WebPack工作原理

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

这段话有三个重点:

打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。

转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。

优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任

1、webpack的基本配置

1.1、entry(项目入口,打包的入口文件,一个字符串或者一个对象):entry:"./src/index.js"

1.2、output(出口文件,配置打包的结果,一个对象):

output:{
  filename: "build.js"
}

1.3、module(模块的处理):loader的配置主要在module.rules中进行,例如:

module: {
  rules:[{
    test: /(\.jsx|\.js)/,  //表示匹配规则,是一个正则表达式
    use:{        //表示针对匹配文件将使用处理的loader
      loader: "babel-loader",  
      options: {
        presets: ["es2015", "react"]
      }
    }
  }]
}
1.4、plugin(loader不能做的处理都能交给plugin来做),例如:
const CleanWebpackPlugin = require("clean-webpack-plugin")

{
  plugin:[
    new webpack.DefinePlugin({
      "process.env" : {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new CleanWebpackPlugin(["js"], {
      root: __dirname + "/stu/",
      verbose: true,
      dry: false
    })
  ]
}

1.5、其它常用属性:

devtool:打包后的代码和原始代码存在较大的差异,此选项控制是否生成以及如何生成sourcemap

devserver:通过配置devserver选项,可以开启一个本地服务器(通常在这里配置跨域)

devServer: {
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true,     // target是域名的话,需要这个参数,
        secure: false,          // 设置支持https协议的代理
      }
    }
  }

watch:启用watch模式后,webpack将持续监听热河已经解析文件的更改,开发是开启会很方便

watchoption:用来定制watch模式的选项

performance:打包后命令行如何展示性能提示,如果超过某个大小是警告还是报错

1.6、webpack打包优化常用配置:

1.6.1、减小打包体积:

使用CommonsChunkPlugin分离第三方包

entry: {
    vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
    app: './src/main.js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor", // 当加载 vendor 中的资源的时候,把这些资源都合并到 vendor.js 文件中
        filename: "js/vendor.js",
        minChunks: Infinity,
    })
],

或者使用externals进行cdn网络托管:

// index.html页面中引入
  <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script>
  <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
  <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script>
  <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
  <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script>
  <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script>
// webpack中配置
externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    'redux': 'Redux',
    'history': 'History'
},

// vue.config.js
  configureWebpack:{
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter'
    },
  }

1.6.2、小图片优化,使用url-loader,将小图转成base64,防止小图太多请求次数太多

npm install -D url-loader
module: {
    rules: [{
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
        loader: 'url-loader', // 优化小图片过多造成请求数太多
        options: {
            limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板,否则才拷贝
            outputPath: 'img/'
        } 
    }]
},

1.6.3、压缩css、js和html:

// 压缩css
 rules: [
     {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         //这个地方配置一个对象,添加一个属性进行压缩css文件
         use: {
             loader: 'css-loader',
             options: {
                 minimize: true   // 配置minimize 值为true,压缩css 文件
             }
         }
     })
 },
 
// 压缩js
/*下载*/ npm install -D uglifyjs-webpack-plugin
/*引入*/ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/*配置*/
plugins: [
    new UglifyJsPlugin(), // 压缩 JavaScript
],

//压缩html
/*下载*/ npm   install  -D   html-webpack-plugin
/*引入*/ const HtmlWebpackPlugin = require('html-webpack-plugin')
/*配置*/
plugins: [
    new HtmlWebpackPlugin({
        template: './index.html', // 把 index.html 也打包到 dist 目录中
        // 压缩 html,默认 false 不压缩
        minify: {
            collapseWhitespace: true, // 去除回车换行符以及多余空格
            removeComments: true, // 删除注释
        }
    }), 
],

 

posted @ 2022-09-06 10:42  smil、梵音  阅读(997)  评论(0编辑  收藏  举报