Webpack打包工具使用

Webpack

npm init -y

• 开发时用：-D （–save -dev）
• 开发，上线都用： -S (–save)

1.安装

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

2.配置

1.在项目根目创建webpack.config .js的webpack配置文件

module.exports={
mode:'development'//mode可选development (开发用)和production（上线用）
}

2.在package.json的script节点下新增dev脚本

"scripts":{"dev":"webpack"}//可用npm run dev

3.在终端运行npm run dev

---

自定义打包入口与出口

在webpack.config.js文件中通过entry节点指定打包的入口通过output指定打包的出口

const path = require('path');
module.exports = {
// 打包入口文件
entry: path.join(__dirname, './src/index.js'),
output: {
        // 输出文件的存放路径
        path: path.join(__dirname, 'dist'),
        //输出文件的名称
        filename: 'js/main.js',
    },
}

webpack中的插件

webpack-dev-server（工具）
当修改源代码，webpack会自动进行打包和构建
webpack-dev-server生成到内存中的文件，默认放到了项目的根目录在，而且是虚拟的，不可见的。
安装

npm i webpack-dev-server@3.11.1 -D

配置
修改webpack.json->scripts中的dev命令

"scripts": {
    "dev": "webpack serve",
  },

html-webpack-plugin（插件）
可以通过此插件自定义index.html页面的内容
安装

npm i 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],
}

dev server节点

在webpack.confg.js配置文件中，可以通过devserver节点对webpack-dev-server插件进行更多配置

  devServer: {
        open: true,//初次打包后打开浏览器
        host: '127.0.0.1',//打包所使用的主机地址
        port: 80,//打包所用端口
    },

loader加载器

安装

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

在webpack.config.js的moducle->rules数据中添加loader

 module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
                 }]
            }

打包处理less文件

安装

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

配置
在webpack.config.js的module->rules数据中添加loader规则

mouder:{
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
                }]
        }

打包处理样式中url路径相关的文件

安装

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

配置
在webpack.config.js的module->rules数组中添加loader

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

babel-loader

webpack 无法处理的高级js语法使用bable-loader
安装

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

配置
在webpack.config.js的module->rules添加loader

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

在项目中创建babel.confing.js的配置文件定义babel的配置

module.exports = {
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

打包发布

 "scripts": {
    "dev": "webpack serve",
    "bulid": "webpack --mode production"//发布
  },

通过–model指定参数会覆盖webpack.config.js中的model选项

把js文件统一生成到js目录中
在webpack.config.js中output中的filename‘js/bundle.js’
把images文件放在image目录中
修改webpack.config.js中的url-loader新增outputPath选项可指定图片文件的输出路径

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

打包自动清理dist下的旧文件

安装

npm i clean-webpack-plugin@3.0.0 -D

配置
按需导入插件,得到插件的构造函数，创建插件的实例化对象

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

把创建的实例对象挂载到plugins节点中

  plugins: [htmlPlugin, cleanPlugin],

Source Map

是一个信息文件，存在位置信息，
在webpack.config.js中加devtool:“eval-source-map,”(开发用)
只定位行号，不显示源码
devtool:"nosources-sours-map或SourceMap”（上线用）