webpack 搭建项目实战（一）

1 初步搭建

安装 webpack webpack-cli 包

npm i -D webpack webpack-cli

webpack其实已经在不用配置脚本的时候就可以跑起来
文件结构：

package.json

2 webpack配置打包js文件

添加 webpack.config.js 文件

const path = require('path');
module.exports ={
   
    mode: 'development',
    entry: path.resolve(__dirname,"../src/main.js"),   //入口文件取绝对路径
    output: {
   
        filename: '[name].[hash:8].js',   //打包后文件名，hash值使得每次打包文件名不同
        path: path.resolve(__dirname,'../dist')  //打包后目录
    }
}

修改命令

3 打包html文件

安装 html-webpack-plugin

npm i -D html-webpack-plugin

引入和添加插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

...
    pulgins:[
        new HtmlWebpackPlugin({
   
            template:path.resolve(__dirname,'../public/index.html')
        })
    ]
}

build之后会发现dist文件夹中的 index.html文件自动引入了打包后的js文件

• 多入口文件开发

  生成多个HtmlWebpackPlugin实例即可，并声明chunks数组，在dist下可产生多个html文件

      plugins:[
        new HtmlWebpackPlugin({
       
          template:path.resolve(__dirname,'../public/index.html'),
          filename:'index.html',
          chunks:['main'] // 与入口文件对应的模块名
        }),
        new HtmlWebpackPlugin({
       
          template:path.resolve(__dirname,'../public/header.html'),
          filename:'header.html',
          chunks:['header'] // 与入口文件对应的模块名
        }),
      ]
  

• clean-webpack-plugin

  安装并引入clean-webpack-plugin 插件，实例之后，可清除上次打包产生的文件

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

4 引用CSS文件

安装两个loader，处理 .css文件和 .scss文件

npm i -D style-loader css-loader sass sass-loader

遵循从右向左解析原则，过程：
通过 sass-loader 把 SCSS 源码转换为 CSS 代码，再把 CSS 代码交给 css-loader 去处理。
css-loader 会找出 CSS 代码中的 @import 和 url() 这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。
style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。如果你想把 CSS 代码提取到一个单独的文件而不是和 JavaScript 混在一起，可以使用1-5 使用Plugin 中介绍过的 ExtractTextPlugin。

  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 从右向左解析原则
      },
      {
   
        test: /\.scss$/,
        use: [