整理下最近学习的webpack

学习的内容来自B站:腾讯NEXT学院
目前学习的进度:了解了webpack是干嘛的,webpack大概怎么写,后续关于性能深度调整与优化后续再进行学习

命令行

全局安装webpack npm install webpack webpack-cli –g
本地安装webpack npm install webpack webpack-cli --save-dev

生成package.json npm init -y

安装loader,如
npm install sass-loader node-sass webpack --save-dev

安装 Webpack-dev-server
npm install webpack-dev-server --save-dev

创建webpack.config.js

const path = require(‘path’); // 首先要引入node.js中path 模块，用于处理文件与目录的路径

// const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
// 常量存储的是一个不可以变化的变量。
//
module.exports = {
entry:’./src/./js/main.js’, // 指定入口文件
output:{
path: path.resolve(__dirname, ‘./dist/js’), // 指定出口文件的路径目录
filename: ‘bulid.js’ // 制定出口文件的名称
},
module:{
rules:[
// 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
{
test: /.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
// test 说明了当前 loader 能处理那些类型的文件
// use 则指定了 loader 的类型。
// 注意：数组中的loader不能省略扩展名
}
]
}
}

设置webpack.dev.config.js

      devServer: {
       // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
       // 或者通过以下方式配置
       contentBase: path.join(__dirname, "dist"),
       compress: true,
       // 当它被设置为true的时候对所有的服务器资源采用gzip压缩
       // 对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能
       port: 9000, // 如果想要改端口，可以通过 port更改
       hot: true, // 启用 webpack 的模块热替换特性()
       inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
       host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。

设置plugin插件

1.安装插件,如:npm install --save-dev html-webpack-plugin

2.配置文件中写const,require引入

const HtmlWebpackPlugin = reuire('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        title: '首页', // 用于生成的HTML文档的标题
        filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录（例如：）assets/admin.html
        template: 'index.html' // Webpack需要模板的路径
    }),
    new webpack.HotModuleReplacementPlugin() // 需要结合 启用热替换模块(Hot Module Replacement)，也被称为 HMR
]

ES6转换为ES5语法
1.命令行 npm install --save-dev babel-loader babel-core babel-preset-env

---

webpack性能调优

加快构建速度

TerserPlugin 插件

compress :下 parallel:true,多线程打包

webpack-bundle-analyzer 打包文件体积分析
npm安装
const BundleAnalyZerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyZerPlugin

多线程打包:

1.HappyPack 多进程打包 2.thread-loader 放在线程池work里,必须放所有loader之前 3.预编译
DCE 无用代码消除
tree-shaking