webpack4入门

先说一些废话，其实早就该入手webpack4了，现在都已经webpack5了，但是鉴于webpack5还不是特别稳定，所以先从webpack4入手。webpack4现在零配置，不需要写入口文件了，默认的入口文件为src文件夹内的index.js为主入口文件。

1.安装

npm init
npm install webpack --save-dev
npm install webpack-cli --save-dev
// package.json
"dev":"webpack --mode development",
"prod":"webpack --mode production"
复制代码

2.配置

一顿操作之后，我们发现，打包后的es6并没有被编译。所以我们把babel加进去。

npm install babel-preset-env --save-dev
// .babelrc
{
    "presets":["env"]
}
复制代码

现在问题来了，虽然我们已经将babel的安装也将babel的配置文件放进来了，但是webpack找不到babel的文件。所以我们要在package.json里加入babel的配置，使其生效。

"dev":"webpack --mode development --module-bind js=babel-loader"
复制代码

然后安装babel-loader，不然会报错说少loader。

3.使用

详细代码见webpackdemo文件夹。在此不做粘贴。

• 我们编译后发现tree shaking和scope hoisting并没有生效。在babelrc文件中需要引入配置来让tree shaking和scope hoisting生效。

{
"presets":[["env",{
    "modules":false,
}
]]
}
复制代码

• 同时发现引入css后无法进行编译，会进行报错。接下来开始了我们的表演时间。对css进行配置。写webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
复制代码

• 未完待续。。。。