Vue学习笔记-01：前端 webpack 工具安装及配置使用

webpack 简介及配置使用

1. 工具安装

• 安装webpack：
  npm install webpack -g

• 安装webpack-cli：
  npm install webpack-cli -g

• 验证webpack安装：
  webpack -v

  注： “-g” 表示全局安装

2. 项目配置

• 在项目根目录创建“webpack.config.js”文件，并添加内容：

module.exports = {
    mode: 'development'
}

webpack.config.js是webpack的配置文件，webpack在打包前会先读取该文件。webpack.config.js内的mode可以设置两种模式：

1. development：

   • 开发环境；
   • 不会对打包生成文件进行压缩和性能优化；
   • 打包速度快，适合在开发阶段使用。

2. production：

   • 生产环境；
   • 会对打包生成的文件进行代码压缩和性能优化；
   • 打包速度慢，适合在发布阶段使用。

webpack中的默认约定：

• 默认打包入口文件 sec -> index.js(要打包谁)
• 默认输出文件路径 dist -> main.js（打包好放在哪里）自定义打包入口/出口

const path = require('path')// 导入node.js中路径操作模块
module.exports = {
    entry: path.join(__dirname,'./src/index.js'),// 打包入口文件路径
    output: {
     path: path.join(__dirname,'./dist'),// 输出文件的存放路径
     filename:'bundle.js'// 输出文件的名称
     },
}

注：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件内支持使用node.js相关的语法和模块进行webpack的个性化配置

• 在“package.json”配置：

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

package.json内配置的“dev”属性，属性名称可以随意别写，如“dev123”。但对应的属性值需要按需进行配置，这里使用“webpack”表示打包时使用webpack工具进行打包

3. 打包使用

npm run dev进行打包，
执行成功后，会生成“dist”文件夹，其中会有“main.js”文件，将此文件引用至html文件

<script src="../dist/main.js"></script>

然后即可在浏览器打开该页面，查看效果

4. webpick中的插件

   • webpack-dev-server

     • 类似node.js的nodemon工具
     • 自动打包和构建，每次修改了源代码，webpack会自动进行项目的打包和构建
     • 安装npm install webpack-dev-server -D
     • 配置在“package.json”配 置

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

     • 地址：http://localhost:8080/

   • html-webpack-plugin

     • webpack中的HTML插件，类似一个模板引擎
     • 自定制index.html页面的内容
     • 配置：在webpack.config.js中增加：

      const HtmlPlugin = require('html-webpack-plugin')
     
      const htmlPlugin = new HtmlPlugin({
          template: './src/index.html',// 原文件
          filename: './index.html'
      })
     
      module.exports = {
        plugins: [htmlPlugin],
      }
     

   • style-loader & css-loader 样式loader

     • 安装:npm i style-loader css-loader -D
     • 配置：在在webpack.config.js的module.exports增加：

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

   rules 是一个数组

   • less-loader less 文件load
     • 安装：npm i less-loader less -D
     • 配置：在在webpack.config.js的module.exports增加：

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

   • url-loader & file-loader url链接及文件路径loader
     • 安装 npm i url-loader file-loader -D
     • 配置：在在webpack.config.js的module.exports增加：

     module: {
       rules: [
            {
               // test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'// limit 转换Base64的阈值
               test: /\.jpg|png|gif$/,
               use: {
                   loader: 'url-loader',
                   options: {
                       limi: 22229,
                       outputPath:'image',// 
                   }
               }
           }
       ]
   
     }
   

   • babel-loader js文件相关loader
     • 安装npm i babel-loader babel/core babel/plugin-proposal-class-properties -D
     • 配置：在在webpack.config.js的module.exports增加：

   module: {
       rules: [
           {
               test: /\.js$/,
               // 排除项，只处理开发者编写的js，不处理node-modules里的
               exclude: /node_modules/,
               use: {
                   loader: 'babel-loader',
                   options: {
                       plugins: ['@babel/plugin-proposal-class-properties','babel/core']
                   }
               }
           }
       ]
   }
   

5. 打包发布

• 对项目进行压缩和优化

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

“–mode” 指定webpack的运行模式，“production”表示生产环境，会对代码进行代码压缩和性能优化

• 打包

npm run build

生成的dist文件

• 打包配置

1. 指定js文件的输出路径：
   在webpack.config.js配置文件的output节点：

  output: {
      path: path.join(__dirname, './dist'),  // 输出文件的存放路径  
      filename: 'js/bundle.js' // 输出文件的名称
  },

2. 指定图片文件的输出路径：
   修改webpack.config.js中的url-loader配置项，新增outputPath选项：

{
  // test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'// limit 转换Base64的阈值
  test: /\.jpg|png|gif$/,
      use: {
            loader: 'url-loader',
            options: {
                  limi: 22229,
                      outputPath:'image',
            }
      }
}

3. 自动清理dist目录下的旧文件

npm install clean-webpack-plugin@3.0.0 -D

在webpack.config.js中导入：

const{CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
module.exports = {
  plugins: [cleanPlugin],
}

6. SoureMap
   存储代码压缩前后的对应关系，方便后期调试，开发环境下，webpack默认启用；
   - 默认问题：记录的是生成后代码的位置，与实际源码不一致,解决（仅限在开发模式下使用）：

  module.exports = {
      devtool:'eval-source-map'
  }

在生产环境下如果只想定位报错的具体行数，且不想暴露源代码，可以设置

  devtool:'nosources-source-map'

显示行号，暴露源代码

  devtool:'source-map'