webpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的

简介

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（将ES6转译为ES5,转译Scss,转译TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack安装

mkdir webpack-demo   //创建一个webpack项目
cd webpack-demo      //移动至webpack-demo
npm init -y          //初始化，会创建一个package.json文件
//npm install webpack webpack-cli --save-dev
yarn add webpack webpack-cli --dev
//安装两个依赖，npm或者yarn都可以，推荐yarn
//安装后会出现一个node_modules目录

webpack引入JS

创建一个src目录
src目录内创建一个index.js文件

npx webpack 或者输入路径 ./node_modules/.bin/webpack执行webpack (输入路径更稳定)

webpack自带转义JS功能,不需要下载依赖

webpack.config.js配置

创建一个webpack.config.js文件

const path = require('path')
module.exports = {
    mode:'production',
    //不写默认为production模式所有代码最小化，没有注释（发布用的），development给开发者用的，有注释。
}

入口 | 出口设置

module.exports = {
    mode:'production',
    entry:'./src/index.js',//设置入口，不写文件名，默认为./src/index.js
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'index.js'//设置出口文件名，
    },
}

http缓存

output:{
    filename:'[name].[contenthash].js'//文件名会以http缓存
}

因为每次更新打包，文件名都不一样所以dist文件夹中的文件会越来越多，因此我们每次前打包最好删除之前的文件
rm -rf dist && npx webpack
也可以再package.json中设置

这样以后可以直接用yarn build进行更新

生成html

yarn add html-webpack-plugin --dev 
//npm install --save-dev html-webpack-plugin 需先安装依赖
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
    mode:'development',
    entry:'./src/index.js',//设置入口，不写文件名，默认为./src/index.js
    output:{
        filename:'[name].[contenthash].js'//文件名会以http缓存
    },
    plugins:[new HtmlWebpackPlugin()]//设置HtmlWbepackplugin,可以生成一个html
}
//在HtmlWebpackplugin()中加入对象参数，可以设置以某个文件为模板
//如
{
    title:'My App',//设置title
    //注意:如果引入了新的html文件，但依旧想使用这里的title
    //就需要再html模板文件中head-title里面加入<%= htmlWebpackPlugin.options.title %>这句话
    template:'assets/admin.html'//新建目录文件assets/admin.html
    }

webpack引入css (style标签)

需要下载css loader 和style loader

yarn add css-loader --dev
yarn add style-loader --dev

修改webpack.config.js

module:{
        rules:[
        {
            test:/\.css$/i,//正则表达式，如果发现任何以.css结尾的文件名
            use:['style-loader','css-loader'],//就用css-loader将css内容读到js文件里，style-loader将css-loader读到的内容变成一个标签插入到head里
        },
    ],
}

将css抽成文件

//安装依赖
//yarn add mini-css-extract-plugin --dev
const MinCssExtractPlugin = require('mini-css-extract-plugin')

plugins:[
new MinCssExtractPlugin({
    filename:'[name].[contenthash].css',//生成hash缓存文件，开发时不需要生成文件，所以不需要加contenthash
    chunkFilename:'[id].[contenthash].css',
    ignoreOrder:false,
})]
module:{
        rules:[
        {
            test:/\.css$/i,//正则表达式，如果发现任何以.css结尾的文件名
            use:[
            {
                loader:MinCssExtractPlugin.loader,
                options:{
                    publicPath:'../',
                },
            },
            'css-loader',
            ]
            //use:['style-loader','css-loader'],开发时用这个快一些
        },
    ],
}

我们可以生成两个webpack.config.js方便切换生产环境和开发环境

修改packge.json设置

预览方式

http-server

http-server . -c-1

web dev server

yarn add webpack-dev-server --dev//安装
//修改webpack.config.js
mode:'development',
devtool:'inline-source-map',
devServer:{
    contentBase:'./dist',
}
//修改package.json
//"start":"webpack-dev-server --open",
//运行yarn start

loader和plugin的区别

loader 加载器(用来加载文件)
plugin 插件(加强功能)

bable loader 用来加载高级的js把它变成IE支持的js
style、css-loader 用来加载CSS将它变成页面中的style标签
webpack loader是用来加载文件的，webpack plugin是用来扩展webpack的功能的
lodaer是用来加载资源文件的，可以加载js文件，将js文件转译成低版本浏览器可以支持的js，也可以用来加载css，可以将css变成页面上的style标签或者一些其他的处理，也可以加载图片文件，可以对图片文件进行一些优化

HtmlwebpackPlugin是用来生成一个html文件
MinCssExtractplugin是用来抽取css代码把它变成一个css文件

引入SCSS

//安装依赖
//npm install sass-loader dart-sass webpack --save-dev  
yarn add sass-loader dart-sass --dev

修改webpack.config.js

module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // 将 JS 字符串生成为 style 节点
                "css-loader", // 将 CSS 转化成 CommonJS 模块
                {
                    loader:"sass-loader",
                    options:{
                        implementation:require('dart-sass')
                    }
                }
            ]
        }]
    }

引入 LESS和Stylus

less

//安装依赖
//yarn add less-loader --dev
// yarn add less --dev
//rules添加下面代码
{
    test:/\.less$/,
    loader:["style-loader","css-loader",'less-loader'],
}

less语法

@color:black;
body{
    background:@color;
    color:@color;
}

Stylus

//安装依赖
//yarn add stylus-loader stylus --dev
//rules添加下面代码
{
    test:/\.styl$/,
    loader: ['style-loader','css-loader','stylus-loader']
}

Stylus语法

c = yellow;
body{
    background: c;
}

引入图片

//安装依赖
//yarn add file-loader --dev
//rules添加下面代码
{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
    'file-loader',//把文件变成文件路径
    ]
},

懒加载

使用场景，有时候某个JS文件过大，为了保障加载速度不让用户等待过长时间，所以将一部模块设置成当用户开启某个模块再加载

const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = () => {
    const promise = import('./lazy.js')
    promise.then((module) => {
        module.default()
    }, () => {
        console.log('模块加载错误')
    })
}
document.body.appendChild(button)

用import()加载文件，返回一个promise对象，用.then方法，成功做什么，失败做什么

//部署脚本
//新建deploy.sh
yarn build &&
git add . &&
git commit -m '更新' &&
git checkout gh-pages &&
rm -rf *.html *.js *.css *.css *.png &&
mv dist/* ./ &&
rm -rf dist;
git add . &&
git commit -m 'update' &&
git push &&
git checkout master;