webpack安装、部署及使用

用webpack是为了管理项目结构（依赖包）、动态开发和运行、打包部署、混淆压缩生产文件等等

初始化包管理命令：

npm init -y

当我们想要在项目使用jquery：

npm i jquery -S

npm安装时-S -D的区别是什么？

-S
即–save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
如安装lodash：

npm i --save lodash
-D
即–dev（开发）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器。

注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会在package.json中显示插件名称及版本号。

安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

在项目根目录创建webpack.config.js作为webpack的配置文件，内容如下：

// 使用node向外导出webpack的配置项
module.export = {
    // webpack运行的模式：development production
    // development仅仅做压缩处理
    // production会压缩和性能优化
    mode: 'development'
}

在package.json文件scripts节点下，增加dev的运行脚本：

  "scripts": {
    "dev": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

执行运行脚本

npm run dev

webpack 4.x和5.x默认的入口是src/index.js

这是可以修改的：

webpack.config.js:

const path = require('path')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

热部署插件安装：

npm install webpack-dev-server@3.11.2 -D

热部署运行脚本修改：

package.json:

 "scripts": {

  "dev": "webpack serve",

  "test": "echo \"Error: no test specified\" && exit 1"

 },

执行npm run dev

如果报错，请升级webpack-cli，执行npm install -D webpack-cli

html热部署插件安装：

npm install html-webpack-plugin@5.3.2 -D

修改webpack.config.js:

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

module.exports = {
    mode: 'development',
    plugins: [htmlPlugin]
}

css处理插件安装：

npm i style-loader@3.0.0 css-loader@5.2.6 -D

webpack.config.js中添加css的处理模块：

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/index1.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [htmlPlugin],
    devServer: {
        open: true,
        port: 80
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
}

less处理及热部署：

npm i less-loader@10.0.1 less@4.1.1 -D

url路径处理和file文件处理插件：

npm i url-loader@4.1.1 file-loader@6.2.0 -D

添加处理规则：

 { test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229outputPath=images']  }

高级语法插件安装：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

添加处理规则：

 { test: /\.js$/, use: [ 'babel-loader' ], exclude: [ /node_modules/ ] }

新增babel.config.js：

module.exports = {

  "plugins": [["@babel/plugin-transform-class-properties", { "loose": true }]]

}

package.json新增打包脚本：

 "scripts": {

  "dev": "webpack serve",

  "test": "echo \"Error: no test specified\" && exit 1",

  "build": "webpack --mode production"

 }

如果上方babel配置打包报错，请使用标准依赖和配置：

npm i babel-loader @babel/core @babel/runtime -D
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D

babel.config.js：

module.exports = {

  presets: [ '@babel/preset-env' ],

  plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]

}

安装清空生产包的插件：

npm install --save-dev clean-webpack-plugin

webpack.config.js：

const path = require('path')

const HtmlPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

const cleanWebpackPlugin = new CleanWebpackPlugin()

module.exports = {
    // 默认使用非压缩，基于内存的方式开发
    mode: 'development',
    // 让报错行数和源码保持一致
    // 部署时请使用 devtool: 'nosources-source-map',
    devtool: 'eval-source-map',
    entry: path.join(__dirname, './src/js/index1.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    plugins: [ htmlPlugin, cleanWebpackPlugin ],
    devServer: {
        open: true,
        port: 80
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader' ] },
            { test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229&outputPath=images']  },
            { test: /\.js$/, use: [ 'babel-loader' ], exclude: [ /node_modules/ ] }
        ]
    },
    // 配置目录别名
    resolve: {
        alias: {
            '@': path.join(__dirname, './src/')
        }
    }
}