梳理webpack

一、入门

1、项目初始化

新建一个目录，初始化npm

npm init

此时会需要填入一些项目的基本描述

webpack是运行在node环境中的,我们需要安装以下两个npm包

npm i -D webpack webpack-cli

生成node_modules文件夹

新建一个src文件夹，里面新建一个main.js文件

console.log('测试webpack');

修改webpack配置，package.json

执行

npm run build 

此时就会自动新建一个dist文件夹，里面会有main.js文件，就表示已经打包完成

2、基本配置

新建一个build文件夹,里面新建一个webpack.config.js

// webpack.config.js

const path = require('path');
module.exports = {
    mode:'development', // 开发模式
    entry: path.resolve(__dirname,'../src/main.js'),    // 入口文件
    output: {
        filename: 'output.js',      // 打包后的文件名称
        path: path.resolve(__dirname,'../dist')  // 打包后的目录
    }
}

 

 此时npm run build，会在dist文件夹下，生成一个output.js文件夹

3、配置html模板

技术文件打包好，但是我们的html文件不能每次打包都重新手动引入js文件

（我们在实际开发中，打包生成的output文件，是不同名称的，避免出现缓存问题）

因此我们需要一个插件来帮我们完成手动修改html引入js的文件名这件事情（html-webpack-plugin）

npm i -D html-webpack-plugin

新建一个build同级的文件夹public,里面新建一个index.html

 

 可以发现打包生成的js文件已经被自动引入html文件中

3.1、多入口文件

生成多个html-webpack-plugin实例来解决这个问题

此时dits下就又main和header两个打包后的入口文件 

3.2 clean-webpack-plugin

每次执行npm run build 会发现dist文件夹里会残留上次打包的文件，这里我们推荐一个plugin来帮我们在打包输出前清空文件夹clean-webpack-plugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    // ...省略其他配置
    plugins:[new CleanWebpackPlugin()]
}

4、css文件引入

需要一些loader来解析我们的css文件

npm i -D style-loader css-loader

npm i -D less less-loader

// webpack.config.js
module.exports = {
    // ...省略其他配置
    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader'] // 从右向左解析原则
        },
        {
          test:/\.less$/,
          use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
        }
      ]
    }
} 

4.1为css添加浏览器前缀

npm i -D postcss-loader autoprefixer

// webpack.config.js
module.exports = {
    module:{
        rules:[
            {
                test:/\.less$/,
                use:[ 
                      'style-loader',
                      'css-loader',
                      'postcss-loader',
                       'less-loader'
                    ] // 从右向左解析原则
           }
        ]
    }
} 

接下来，我们还需要引入autoprefixer使其生效

1，在项目根目录下创建一个postcss.config.js文件，配置如下：

module.exports = {
    plugins: [require('autoprefixer')]  // 引用该插件即可了
}

复制代码

2，直接在webpack.config.js里配置

// webpack.config.js
module.exports = {
    //...省略其他配置
    module:{
        rules:[{
            test:/\.less$/,
            use:['style-loader','css-loader',{
                loader:'postcss-loader',
                options:{
                    plugins:[require('autoprefixer')]
                }
            },'less-loader'] // 从右向左解析原则
        }]
    }
}

4.2 拆分css

npm i -D mini-css-extract-plugin

webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  //...省略其他配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
           MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ],
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[hash].css",
        chunkFilename: "[id].css",
    })
  ]
}

5、打包 图片、字体、媒体、等文件

file-loader就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中
url-loader 一般与file-loader搭配使用，功能与 file-loader 类似

// webpack.config.js
module.exports = {
  // 省略其它配置 ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  }
}

6、用babel转义js文件

为了使我们的js代码兼容更多的环境我们需要安装依赖

npm i -D babel-loader @babel/preset-env @babel/core

二、搭建vue环境

1、解析vue文件

npm i -D vue-loader vue-template-compiler vue-style-loader   // vue-loader 用于解析.vue文件
npm i -S vue  // 用于编译模板

const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    module:{
        rules:[{
            test:/\.vue$/,
            use:['vue-loader']
        },]
     },
    resolve:{
        alias:{
          'vue$':'vue/dist/vue.runtime.esm.js',
          ' @':path.resolve(__dirname,'../src')
        },
        extensions:['*','.js','.json','.vue']
   },
   plugins:[
        new vueLoaderPlugin()
   ]
}

2、热更新

npm i -D webpack-dev-server

还有一些优化webpack配置，如下

转载：掘金https://juejin.cn/post/6844904031240863758#heading-34