webpack4

使用webpack-dev-serve

• 详细文档

npm install --save-dev webpack-dev-server

修改webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist',
+   },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Development',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

告诉webpack-dev-server 将dist目录放置 localhost:8080 服务器上

注意：webpack-dev-server在编译后不会写任何output文件，相反，他会将bundle文件保存在内存中，就好像它们是挂载在服务器根路径上的真实文件一样。如果您的页面希望在不同的路径上找到bundle文件，那么您可以使用dev服务器配置中的publicPath属性来更改它。

如果想查看目录请访问http://localhost/webpack-dev-server

看到上面就想吐槽，之前实习时自己每次工作都开了好几个服务,难怪一直很卡，bundle都存在内存中。

Hot Module Replacement 热模块更替

webpack-dev-middle使用在webpack-dev-server内部，可以单独拿出来使用，我看网上的教程大部分都是监听文件更改实现热更新。

预处理器

loader的加载顺序

比如下面的css的配置

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

‘
loader的加载顺序是从后到前,相当于

output =  style-loader(css-loader(input))

loader配置项

• exclude 与 include

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

exclude 与 include 同时存在时， excluede的优先级更高

• resource与issuer

// index.js
import './style.css'

resource为style.css
issuer 为 index.js
前面介绍的test,exclude, include 本质上是属于对resource也就是被加载这的配置，issuer加载者进行限制

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/,
        issuer: {
              test: /\.js$/，
              include: /src/page/
        }
      }
]

• enforce

webpack按loader的执行顺序可分为pre,inline,normal,post四种类型
默认是normal，inline不推荐，就只有pre与post

babel

webpack 4.x | babel-loader 8.x | babel 7.x

• install

npm install -D babel-loader @babel/core @babel/preset-env webpacks

• webpack.config.js

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
            presets: [[
              '@babel/preset-env', {
                modules: false, // 禁用模块语句的转化
              }
            ]],
          },
        }
},

typescript

• ts-loader

• install

npm i -D ts-loader typescript

• webpack.config.js

{
     test: /\.ts$/,
     use: 'ts-loader',
},

还需要配置tsconfig.json。

html-loader

html-loader将html文件格式化成字符串可以导入到js文件中

• install

npm i -D html-loader

• webpack.config.js

{
        test: /\.html$/,
        use: 'html-loader'
}

文件存取

file-laoder

要理解publicPath这个属性值

url-loader

与file-loader一致，但是有个文件阈值

参考资料

webpack-dev-server的publicPath