1、webpack 初体验

全局安装webpack

npm i webpack webpack-cli -g

/*index.js:webpack 入口起点文件1.运行指令：开发环境：webpack ./src/index.js -o ./build/built.js --mode=developmentwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js生产环境：webpack ./src/index.js -o ./build/built.js --mode=productionwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js2.结论：1.webpack能处理js/json资源，不能处理css/img等其他资源2.生产环境比开发环境多压缩一个js文件*/
function add(x,y) {return x+y;
}
add(1,2)

执行打包 这个文件，打包成功

总结： index.js:webpack 入口起点文件

1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件

2.打包样式资源

创建webpack.config.js文件（配置文件）

use 数组中顺序执行：从右到左，从上到下

const {resolve} = require('path');module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},]},// 模式mode:'development'
}

3.打包html资源

webpack.config.js文件（配置文件）

plugin 1.下载，2.引入，3.使用

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

4.打包图片资源

webpack.config.js文件（配置文件）

需要url-loader 和html-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理图片资源,但是处理不了html中img的路径问题test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 关闭es6esModule:false,name:'[hash:10].[ext]' //不重复名字},},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

5.打包其他资源

webpack.config.js文件（配置文件）

主要用到 file-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理图片资源,但是处理不了html中img的路径问题test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 关闭es6esModule:false,name:'[hash:10].[ext]' //不重复名字},},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'},{// 打包其他资源exclude: /\.(css|js|html)$/,loader: 'file-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

6.devServer

// 自动打包运行
// 指令：npx webpack-dev-server

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

7.提取css成单独文件

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

8.css兼容

package.json增加

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

9.css压缩

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

10.eslint 语法检查

"eslintConfig": {"extends": "airbnb-base"}

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'},// {//     test:/\.js$/,//     exclude:/node_modules/,//     loader:'eslint-loader',//     options:{//         fix:true//     }// }]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

11.js，html压缩只要将mode改为production就会自动压缩

12.开发性能提升：HMR:热模块替换

if (module.hot){module.hot.accept('./print.js',function () {print();})
}

13.开发性能提升：source-map

devtool: "source-map",

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},devtool: "source-map",// 模式mode:'development'
}

13.生产性能提升：tree-shaking（去除没用到的代码）

  "sideEffects":["*.css"]