使用webpack搭建个性化项目

安装主包

yarn add webpack webpack-cli webpack-dev-server -D

根据项目实际需求安装loaders，webpack-loaders列表

根据项目实际需求安装插件， webpack-plugins列表

常用包列表

包名	说明
webpack	webpack主程序，配置列表
webpack-cli	webpack命令，webpack4.0以上必需
webpack-dev-server	webpack开发模块，常用配置
style-loader	将css内容转换成js字符串，生成style节点
css-loader	将css文件转换成CommonJS模块，在js文件中可以使用import等方式引入css
sass-loader	将sass/scss编译成css，需要安装包node-sass或sass，常用配置
clean-webpack-plugin	删除构建文件，常用配置
html-webpack-plugin	html打包插件，常用配置
html-webpack-inline-source-plugin	将js、css等代码内联到html中，依赖html-webpack-plugin，常用配置
friendly-errors-webpack-plugin	开发环境下，友好的错误提示插件，可自定义编译完成后的显示
progress-bar-webpack-plugin	开发环境下，编译进度条，可自定义进度条样式和显示文字
open-browser-webpack-plugin	开发环境下，编译完成后自动打开浏览器

常用配置

webpack-dev-server

module.exports = {
  ...
  devServer: {
    // 监听端口，默认式8080
    port: 8080,
    // 指定使用一个host地址，默认式localhost
    host: '0.0.0.0',
    // 启用https服务，开启后默认提供自制签名，也可以传入一个object提供指定证书
    https: true,
    // https: {
    //   key: fs.readFileSync("/path/to/server.key"),
    //   cert: fs.readFileSync("/path/to/server.crt"),
    //   ca: fs.readFileSync("/path/to/ca.pem"),
    // }
    // 静态文件根目录，可以使用数组提供多个目录，推荐使用绝对路径
    contentBase: path.resolve('public'),
    // 启动服务后是否打开浏览器，推荐使用cli方式 `--open`，可自由控制
    open: true,
    // 是否启用gzip压缩
    compress: true,
    // 启用 webpack 的模块热替换特性
    hot: true,
    // 转发请求，通常用来转发api请求
    proxy: {
      // 监听规则
      '/api': {
        /**
         * derServer运行在localhost的8080端口，数据服务运行在 80 端口，
         * 转发 /api 路径下的请求到 localhost 的80端口，
         * 这样可以免去服务器端的跨域设置
         */
        // 转发地址
        target: 'http://localhost',
        // 转发规则
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
  ...
}

sass-loader

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.scss/,
        use: [
          { loader: 'style-loader'}, // 将 JS 字符串生成为 style 节点
          { loader: 'css-loader' },  // 将 CSS 转化成 CommonJS 模块
          { loader: "sass-loader" }  // 将 Sass 编译成 CSS
        ]
      }
    ]
  }
  ...
}

clean-webpack-plugin

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

module.exports = {
  ...
  plguins: [
    new CleanWebpackPlugin() // 默认情况下会删除配置 output.path 目录中的所有文件
  ]
  ...
}

html-webpack-plugin

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

module.exports = {
  ...
  plguins: [
    new HtmlWebpackPlugin({
      // html document的title，默认为Webpack App
      title: '', 
      // 输出的html的文件名称
      filename: '',
      // html模板所在的文件路径
      template: '',
      // chunks主要用于多入口文件，选择需要编译的入口文件
      chunks: []
    })
  ]
  ...
}

html-webpack-inline-source-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

module.exports = {
  ...
  plguins: [
    new HtmlWebpackPlugin({
      ...
      inlineSource: '.(js|css)',
      ...
    }),
    new HtmlWebpackInlineSourcePlugin () // 插件必需写在 HtmlWebpackPlugin 后面
  ]
  ...
}