学习的内容来自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