webpack详解webpack的作用转译代码（将高版本的JS转译成低版本JS）构建build 代码压缩（打包代码

webpack的作用

转义代码（将高版本的JS转译成低版本JS）
构建build（配合各种loader可以让你使用sass，less，stylus等语法）
代码压缩（打包代码时除去代码中用不到的部分，只提取有用的部分）
代码分析

全局安装

首先创建一个webpack-demo用vscode打开；
新建终端，运行cd webpack-demo进入文件夹
运行npm init -y （会在外面自动创建一个package.json文件）
使用下面这行命令进行全局安装

npm install -g webpack@4 webpack-cli@3
或
yarn global add webpack@4 webpack-cli@3

会新增文件node_modules和yarn.lock

5.终端输入命令npx webpack运行webpack

配置webpack

可新建一个webpack.config.js文件进行配置

1.mode有两个取值：development和production。 development可以理解为开发模式，production用于生产环境代码构建，此时代码最为简洁。

2.entry是 Webpack 配置模块的入口Webpack开始构建时会从 entry 的文件开始递归解析出所有依赖的模块。默认路径为'./src/index.js' 可手动更改。

3.output是 Webpack 配置输出文件的文件名、路径等信息的选项。对于多个入口，只需要配置一个 output。最基础的用法只需要配置一个 filename选项即可：上图这样配置将会输出一个 main.js在dist目录。

注意：dist文件夹下的东西都是自动生成的，不可以更改，更改了也没用。

配置package.json

遇到运行webpack报错时，先复制提示部分的内容替换掉你的package.json中对应的部分，然后yarn install, 再次重试即可

{
  "name": "webpack-demo",     
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",            //新增这一句  运行yarn start会自动调用webpack-dev-server
    "build": "rm -rf dist && webpack --config webpack.config.prod.js",  //这一句要加上
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {          //从这里开始到最后替换掉原本该文将相对应部分的内容
    "css-loader": "^3.2.0",
    "dart-sass": "^1.23.7",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

在webpack-demo文件夹外分别新建三个名为webpack.config.js，webpack.configbase.js,webpack.configprod.js的文件夹

webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const base = require('./webpack.config.base.js')
module.exports = {
    ...base,
    devtool: "inline-source-map",
    devServer: {
        contentBase: "./dist"
    },
    module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

webpack.configbase.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    output: {
        filename: '[name].[contenthash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'RanRan',  //填入标题名，会将此标题名同步到dist自动生成的htnl里面的标题里
            template: 'src/assets/index.html'  //需要在src目录下新建一个assets的文件夹 里面再新建一个html文件
        })
    ],
    module: {
        rules: [             //图片配置
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']        //这个loader的作用是把文件变成文件路径 从而来引入图片

            },
                            //stylus配置
            {        
                test: /\.styl$/,
                loader: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader',
                ]
            },
                                //less配置
            {
                test: /\.less$/,
                loader: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            },
                                    //scss配置
            {
                test: /\.scss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('dart-sass')
                        }
                    },
                ],
            },
        ],
    }
};

webpack.configprod.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const base = require('./webpack.config.base.js');
var path = require('path');

module.exports = {
    ...base,
    mode: 'production',    
    plugins: [
        ...base.plugins,
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
            ignoreOrder: false,
        }),
    ],
    module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    'css-loader',
                ]
            },
        ],
    },
};

以上三个文件可以实现开发模式和上线模式随意切换开发过程中运行yarn start预览；开发完成要上线运行yarn build打包

安装loader

在终端运行 yarn add webpack-dev-server --dev 安装webpack-dev-server，终端输入yarn start内容更改时可以实现预览效果实时更新

yarn add html-webpack-plugin --dev 用于生成html文件

yarn add sass-loader dart-sass --dev

yarn add style-loader --dev

yarn add mini-css-extract-plugin --dev 用于生成css文件

yarn add less --dev

yarn add styleus-loader stylus --dev

yarn add file-loader --dev 图片安装完每一个后可以yarn build一下看看有没有报错。