webpack4正确配置

原文: A tale of Webpack 4 and how to finally configure it in the right way

一.初始配置

初始化项目

初始化后将在项目目录下生成一个package.json文件

mkdir webpack-4-tutorial && cd webpack-4-tutorial
npm init -y

添加webpack4

项目目录将会生成node_modules文件夹

npm install webpack webpack-cli --save-dev

此时的package.json为

{
"name": "webpack-4-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
  "webpack": "^4.20.2",//  确保这里是webpack4
  "webpack-cli": "^3.1.2"
}
}

修改package.json

在scrpit属性下修改配置，并配置开发和编译两个模式

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development", //  开发者模式
  "build": "webpack --mode production"//  编译模式，默认模式
}

输入文件

创建一个src文件夹，并新建一个工程文件index.js,内部代码为：

```javascript
console.log(`Hello Webpack4`);
```

测试是否成功

运行命令

开发模式

npm run dev

dev

编译模式

 npm run build

build

注意
1. 编译后会自动创建dist文件夹并生成main.js文件，而且我们可以发现build模式编译后的文件比dev模式小得多。
2. webpack4相比之前版本为用户配置了默认的入口文件（./src/index.js）以及默认的输出(./dist/main.js)。
  默认配置可在package.json里修改：
```
"scripts": {
   "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
   "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
```

二.增加ES6支持

若要支持ES6，则需要babel去转换它

安装babel等相关插件

不同环境版本要求不同，编译时可能会出错，可根据提示改变版本

npm install babel-core babel-loader babel-preset-env --save-dev

babel_err

 npm install babel-core babel-loader@7 babel-preset-env --save-dev

配置babel

在项目目录下新建.babelrc文件,写入如下内容

     {
       "presets": ["env" ]
     }

配置babel-loader插件

项目下新建一个webpack.config.js,加入如下基础配置

    // webpack v4
   const path = require('path');
   module.exports = {
     entry: { main: './src/index.js' },//  入口文件配置
     output: {// 输出配置
       path: path.resolve(__dirname, 'dist'),
       filename: 'main.js'
     },
     module: {// 规则设置
       rules: [
         {
           test: /\.js$/,//  匹配所有js文件
           exclude: /node_modules/,//  不包括node_modules文件夹
           use: {
             loader: "babel-loader"//  插件
           }
         }
       ]
     }
   };

npm run dev、npm run build编译正常即成功

三.增加HTML和CSS支持

CSS

src文件夹下新建style.css

  div {
   color: red;
 }

在dist文件夹下新建一个index.html的文件

<html>
   <head>
   	<link rel="stylesheet" href="style.css">
   </head>
   <body>
   	<div>Hello, world!</div>
   	<script src="main.js"></script>
   </body>
</html>

src中index.js引入css文件

  import "./style.css";
  console.log(`Hello Webpack4`);

安装CSS插件

webpack只会辨别js.这里需要通过extract-text-webpack-plugin获取css文本进行压缩。而Webpack4则不再使用此插件而是mini-css-extract-plugin

  npm install --save-dev mini-css-extract-plugin
  npm install style-loader css-loader --save-dev

配置css的规则

打开webpack.config.js

// webpack v4
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//新增
module.exports = {
entry: { main: './src/index.js' },
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.js'
},

plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
],//新增

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
       test: /\.css$/,
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
           options: {
             publicPath: '../'
           }
         },
         "css-loader"
       ]
     },//新增CSS规则
  ]
}
};

npm run dev编译成功后dist自动生成mian.css文件

HTML

src下新建一个index.html文件

<html>
   <head>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div>Hello, world!</div>
     <script src="main.js"></script>
   </body>
</html>

安装html插件

npm install html-webpack-plugin --save-dev

修改webpack.config.js

// webpack v4
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');//  新增
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })//  新增
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
	     test: /\.css$/,
	     use: [
	       {
	         loader: MiniCssExtractPlugin.loader,
	         options: {
	           publicPath: '../'
	         }
	       },
	       "css-loader"
	     ]
	   },
    ]
  }
};

基础配置测试

删除dist文件夹并运行npm run dev命令，将重新自动创建dist文件夹以及html、css、js文件

run_dev

原文: A tale of Webpack 4 and how to finally configure it in the right way

一.初始配置

二.增加ES6支持

三.增加HTML和CSS支持

CSS

HTML

猜你喜欢