webpack基本使用、配置设置、项目打包

基本使用

1、初始化配置文件

npm init -y

2、引入项目依赖的模块库

npm install jquery -S

3、安装 webpack 相关的两个包

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

4、在项目中盘配置 webpack

• 在项目根目录中，创建webpack.config.js 的webpack 配置文件，并初始化如下基本配置

// 使用 Node.js 中的导出语法，向外导出一个webpack 的配置项
module.exports = {
    // 代表 webpack 运行模式，可选值有两个 development 和 production
    mode: 'development'
}

• 在package.json 的 scripts 节点下，新增 dev 脚本如下：

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

5、执行webpack打包命令打包

npm run dev

配置相关

1、修改webpack打包指定文件名称和生成文件路径与名称配置

entry: path.join(__dirname, './src/index.js'),
    // 指定生成文件放置位置
    output: {
        // 存放路径
        path: path.join(__dirname, './dist'),
        // 生成的文件名
        filename: 'bundle.js'
    }

2、webpack中的插件

• 安装webpack-dev-server，文件保存后自动打包

npm install webpack-dev-server@3.11.2 -D

• 配置webpack-dev-serve

（1）、修改package.json -> 中的 dev 命令如下

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

（2）、再次运行 npm run dev 命令，重新进行项目打包

（3）、在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

如出现以下报错

 

则再次使用命名

npm install webpack-cli --save-dev / npm install webpack-cli -D

• 安装 html- webpack-plugin，将首页复制到服务根目录

npm install html-webpack-plugin@5.3.2 -D

• 配置 html-webpack-plugin

 

• devServer节点

 

 

• 打包处理css文件

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

 

• 打包处理 less 文件

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

 

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

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

 

• 打包处理 js 文件中的高级语法

 

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

 

 

module.exports = {
    // 声明 babel 可用的插件 
    Plugin: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}

 

• 解决默认 Souce Map 问题

 

 

webpack打包发布

  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

 

 

• 设置打包后js文件放在js名称文件夹下

 

 

• 设置打包后img图片放置images名称文件夹下

            // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
            {test: /\/.jpg|png|gif$/, use: 'url-loader?limit=20000&outputPath=images'},

 

设置打包自动删除之前文件

npm install clean-webpack-plugin -D

 

• 路口查找使用@ 代替../../ @从根目录依次查找