webpack4 正确的配置方式

栏目: CSS · 发布时间: 5年前

内容简介：开始新的项目上下会初始化一个项目，接下来添加webpack4.确定装的webpack版本是4.

开始新的项目

mkdir webpack-4-tutorial
cd webpack-4-tutorial

npm init
复制代码

上下会初始化一个项目，接下来添加webpack4.

npm install webpack webpack-cli --save-dev
复制代码

确定装的webpack版本是4.

接下来修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
 },
复制代码

保存之后， npm run dev 会出现一个错误.

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 4442e3d9b2e071bd19f6
Version: webpack 4.12.0
Time: 62ms
Built at: 2018-06-22 14:44:34

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '~/workspace/webpack-4-tutorial'
复制代码

两个问题，第一个出错的意思是说，没有设置 mode ,默认会认为是 production 模式。第二个是说 src 下没有找到入口模块。

我们来改下，再次打开 package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development"
  },
复制代码

在项目下新建 src 文件夹，然后 src 下新建 index.js .

console.log(“hello, world”);
复制代码

保存后再次运行 npm run dev .

这时候成功打包，发现项目里多了一个 dist 文件夹. 这是因为webpack4是号称0配置，所以很多东西都给你配置好了，比如默认的入口文件，默认的输出文件。在webpack中配置环境，基本都是两个配置文件( development , production ).在 webpack4 中，有这两个模式来区分。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}
复制代码

保存后运行 npm run build ,你会发现 main.js 文件小了很多。

上面很多东西都是通过默认配置来的，尝试去重写配置，在不使用配置文件的情况下。

"scripts": {
     "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
   "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
 },

复制代码

编译转换你的代码

es6 就是未来，可是现在的浏览器对他的支持不是很好，我们需要 babel 来转换他。

npm install babel-core babel-loader babel-preset-env --save-dev
复制代码

bable的配置，需要创建一个文件去配置。新建 .babelrc 文件，写入如下内容

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

接下来需要配置 babel-loader ,可以在 package.json 文件配置，但是还是独立出去好，比较好维护。项目下新建一个 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$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
复制代码

然后 package.json 的脚本可以去除一些配置.

"scripts": {
    "dev": "webpack --mode development",
  "build": "webpack --mode production"
  },
复制代码

然后再运行编译，也是可以正常编译。

Html && Css

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

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

上面这段代码，使用到了 style.css . 接来下去处理 css 的问题. src 文件夹下新建 style.css 。

div {
  color: red;
}
复制代码

然后在js文件中引入css.,打开 index.js 文件

import "./style.css";
console.log("hello, world");
复制代码

解析来我们就需要配置 css 的规则，打开 webpack.config.js

// webpack v4
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //新加入

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }// 新加的css 规则
    ]
  }
};

复制代码

上面我们用了一些插件和加载器.需要去安装.

npm install extract-text-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev
复制代码

上面我们提出css来编译，你可以看到他的规则，规则可以这样认为

{
        test: /\.拓展名$/,
        exclude: /不需要执行的文件夹/,
        use: {
          loader: "你的加载器"
        }
}
复制代码

我们需要 extract-text-webpack-plugin 这个提取插件，因为 webpack 只会辨别 js .这里需要通过 ExtractTextPlugin 获取css文本进行压缩。

我们再次尝试编译， npm run dev 发现会有报错，这个是因为这个提取器在新版本的原因。相关报错Webpack 4 compatibility 可以解决这个问题，那就是换个版本。

npm install -D extract-text-webpack-plugin@next
复制代码

然后再编译，发现可以来，同时再 dist 下有一个style.css文件。

这时候 package.json 的依赖文件如下

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.12"
  }
复制代码

下面我们来配置支持 scss

npm install node-sass sass-loader --save-dev
复制代码

我们在 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 ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');// 新加

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }// 新加
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename: 'style.css'}),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })// 新加

  ]
};

复制代码

这个是最终的html的一个模版. 现在 html , css , js 基本配置的差不多，我们删除 dist 来试试。

rm -rf dist/
npm run dev
复制代码

这时候会发现 dist 下存在 js,css,html 文件.

缓存

可以查看关于hash缓存的文档来使浏览器只请求改变的文件.

webpack4提供了chunkhash来处理。

来看看:

// webpack v4
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');// 新加

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js' //changed
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }// 新加
    ]
  },
  plugins: [
    new ExtractTextPlugin(
      {filename: 'style.[chunkhash].css', disable: false, allChunks: true}
    ), //changed
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })

  ]
};

复制代码

然后 src 下的 html 也要修改

<html>
  <head>
    <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
  </body>
</html>
复制代码

可以发现这里改变来，这个是使模版使用hash.

好了，现在可以编译，会发现 dist 下的css和js名字是带有hash指的。

缓存带来的问题，如何解决

如果我们改变代码，在编译的时候，发现并没有生成创新的hash名文件。

div {
  color: 'red';
  background-color: 'blue';
}
复制代码

再次进行编译 npm run dev ，发现并没有生产新的hash文件名称，但是如果改变js代码，再次编译，会发现是改变了hash名称

import "./index.css"
console.log('Hello, world!');
复制代码

如何解决？

两种办法：

方法1 把css提取器中的[chunkhash]换成[hash].但是这个会与webpack4.3中的 contenthash 有冲突.可以结合webpack-md5-hash一起使用。

npm install webpack-md5-hash --save-dev

// webpack v4
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash'); //新加
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin(
      {filename: 'style.[hash].css', disable: false, allChunks: true}
    ),//changed
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash() //新加

  ]
};

复制代码

然后编译查看是否改变。现在的变化是，改变css文件，那么css文件的hash名字改变。如果改变js文件，那么css和js的压缩hash名称都将改变。

方法2(推荐)

方法1可能还会存在其他的冲突，所以来尝试下 mini-css-extract-plugin

这个插件是为了取代extract-plugin, 并带来兼容性的改变

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

尝试使用

// webpack v4
const path = require('path');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//新加

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // {
      //   test: /\.css$/,
      //   use: ExtractTextPlugin.extract(
      //     {
      //       fallback: 'style-loader',
      //       use: ['css-loader']
      //     })
      // }
      {
        test: /\.(scss|css)$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      } // 新加
    ]
  },
  plugins: [
    // new ExtractTextPlugin(
    //   {filename: 'style.[hash].css', disable: false, allChunks: true}
    // ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),//新加
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()

  ]
};

复制代码

好了，接下来我们尝试改变文件会怎么变化。改变css，进行编译发现只有css的文件改变来。改变js文件，发现编译之后只有js的hash名称改变，不错，就是这样。

继承PostCss

postcss 大家应该不会陌生了。

npm install postcss-loader --save-dev
npm i -D autoprefixer
复制代码

-D .

创建 postcss.config.js

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}
复制代码

然后来配置你的 webpack.config.js

// webpack v4
const path = require('path');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(scss|css)$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']//changed
      }
    ]
  },
  plugins: [
    // new ExtractTextPlugin(
    //   {filename: 'style.[hash].css', disable: false, allChunks: true}
    // ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()

  ]
};

复制代码

保持dist整洁

这里使用 clean-webpack-plugin 插件.

npm i clean-webpack-plugin --save-dev

// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');//新加

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(scss|css)$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']//changed
      }
    ]
  },
  plugins: [
    // new ExtractTextPlugin(
    //   {filename: 'style.[hash].css', disable: false, allChunks: true}
    // ),
    new CleanWebpackPlugin('dist', {} ),//新加
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()

  ]
};

复制代码

这样每次编译的时候，就会清空 dist 文件夹

最终代码

以上所述就是小编给大家介绍的《webpack4 正确的配置方式》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

颠覆式成长

惠特尼•约翰逊 / 张瀚文 / 中信出版集团 / 2018-8 / 49.00

你可能想要标新立异、挑战自我，甚至抛弃安逸的事业；你可能会从目前的行业或公司中跳槽，进入一个完全陌生的崭新领域, 这本书会让你认识到颠覆式成长的意义所在。成功没有捷径，颠覆也会令人心生惧意，但是在职业发展与个人成长上的回报，会让你克服这种恐惧，让你不断尝试、不断精进。 S型曲线精进模型将帮助你预测自己创新的成长周期，洞悉颠覆自我过程中的心路历程，在变革与颠覆中从容应对，......一起来看看《颠覆式成长》这本书的介绍吧!

码农工具