彻底方案：超详细的webpack4配置（webpack3与webpack4的差别）

webpack4的发布已经有一段时间了，据说webpack4的发布是注意到了他的亮点：实现零配置。webpack4制定了入口和出口的位置，可是实现页面应用和须要具体的功能的是时候仍是避免不了进行配置一些选项。并且webpack的难点和精髓也在配置里面。webpack3对比webpack4传送门http://www.javashuo.com/article/p-tmtuzfjh-kh.html

想想公司后台好像在用spring cloud和spring Boot一样是帮你配置了大部分配置选项从而减小手动配置的做用。通读了一下webpack4的技术文档，来撸一撸webpack4有哪些变化。

　　来看一下package.json

{
　　"name": "webpack_demo",
　　"version": "1.0.0",
　　"description": "",
　　"main": "index.js",
　　"scripts": {
　　　　"dev": "webpack --mode development",
　　　　"build": "webpack --mode production",
　　　　"start": "webpack-dev-server --inline --hot"
　　},
　　"keywords": [
　　　　""
　　],
　　"author": "kim",
　　"license": "ISC",
　　"devDependencies": {
　　　　"babel-core": "^6.26.3",
　　　　"babel-eslint": "^8.2.6",
　　　　"babel-preset-es2015": "^6.24.1",
　　　　"bable-loader": "0.0.1-security",
　　　　"css-loader": "^1.0.0",
　　　　"eslint": "^5.2.0",
　　　　"eslint-config-airbnb": "^17.0.0",
　　　　"eslint-config-standard": "^11.0.0",
　　　　"eslint-loader": "^2.1.0",
　　　　"eslint-plugin-html": "^4.0.5",
　　　　"html-loader": "^0.5.5",
　　　　"node-sass": "^4.9.2",
　　　　"sass-loader": "^7.0.3",
　　　　"style-loader": "^0.21.0",
　　　　"webpack": "^4.16.2",
　　　　"webpack-cli": "^3.1.0",
　　　　"webpack-dev-server": "^3.1.5"
　　},
　　"dependencies": {
　　　　"babel-loader": "^7.1.5",
　　　　"jquery": "^3.3.1",
　　　　"mustache": "^2.3.0"
　　}
}

这是最终形态，几个重要的点有一下选项：main ， scripts  ， devDependencies ， dependencies。

在package.json里面能够直观的看到项目所引用的不一样情况的依赖（devDependencies，dependencies）和启动项目的命令（scripts）。

如下是在本地建了一个名叫webpack的文件夹，咱们的demo放在里面

cd webpack

npm init                                                 初始化

npm install webpack --save-dev　　   安装webpack

webpack -w　　　　　　　　　　　   webpack -watch的缩写，监听的时候顺便打包。中间过程可能会报错，根据提示安装webpack-cli

(webpack-cli)   

 

如下是执行webpack -w结果：

 

webpack4在loader,optimize上进行了不少改动。

咱们手动建立webpack.config.js文件，module.exports模块配置了入口，出口，插件，loader工具，优化等等：

npm install jquery --save

 

npm install bable-loader --save-dev

npm install babel-core babel-preset-es2015 --save-dev 

 

 

webpack配置须要注意的几点：

 

 

 

module.loaders改成module.rules

module.loaders.loader改为module.loaders.use

loader的”-loader”均不可省略

 

 

 

 

某些配置选项配置时候须要绝对路径

 

 

 

合并相同的插件

plugins : [new webpack.optimize.CommonsChunkPlugin({

name : 'main',

children : true,

minChunks : 2,

}),],

 

此段代码已经在webpack4的高版本里面被移除

换成了以下的配置选项：

optimization: {

        splitChunks: {

            cacheGroups: {

                commons: {

                    name: "commons",

                    chunks: "initial",

                    minChunks: 2

                }

            }

        }

    },

 

 

 

运行webpack-dev-server --inline --hot时报错“command not found”

这时候须要全局安装webpack-dev-server: npm install webpack-dev-server -g

 

 

webpack的scripts选项：

"scripts": {

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  },

 

用npm run dev 和npm run build来实现。

 

代码仍是要上手撸的，尽管如今的构建工具帮你作了大部分的工做，可是除了可以熟练应用以外，还应该可以深谙其中的原理，这样的话，不论它如何变化都不可以对你的代码形成断层性的阻断做用。webpack内部仍是有不少的高级配置的由于项目并无用到webpack，加之不适合，因此具体的实用的例子还得在之后本身作过demo或者参与项目构建以后才可以道清其使用的使用技巧。