webpack4.x 总结

webpack4.x 总结

node.js官网下载node.js，按提示安装（会自动配置环境变量）.安装带有的npm包管理器，可直接使用。

1.webpack全局安装

npm install -g webpack

2.创建项目

比如你的文件夹是demo

cd到demo文件夹下，执行： npm init 和 npm install -g webpack-cli；

执行完 npm init命令后，会自动在根目录下生成一个名为package.json的文件。

在此文件的srcipts字段中，我们添加以下设置：

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

这样，我们就能直接使用命令 npm run dev 或 npm run build 来进行文件的打包处理。

3.注意事项

demo下要创建src文件夹，并且创建index.js.  因为webpack4.x打包默认入口文件是 根目录下的src文件夹下的index.js。

那为什么我后面加一个-D的参数呢？这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。

【安装babel】

1.安装 babel-loader / babel-core / babel-preset-env

npm install babel-loader

npm install babel-core

npm install babel-preset-env

2.配置babel规则

如何配置：在根目录下package.json文件中，增加一个"babel"属性，该属性是一个json对象，作用是设置项目中的babel转码规则和使用道德babel插件。其基本格式如下：

"babel": {

    "presets": ["env"],

    "plugins": []

}

presets属性设定转码规则，plugins属性设置使用到的插件。

presets属性我们直接设置为“env”，告诉npm本项目将使用babel，并且使用babel-preset-env转码规则。

3.建立并配置webpack.config.js

这个文件的作用是对webpack打包的参数进行设置，虽然打包项目，该文件不是必须的，但是如果想要更个性化地打包配置，那么这个文件还是少不掉的。

如何操作：

在根目录下新建webpack.config.js文件，在其中输入：

module.exports={
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }

}

这就告诉webpack打包时，一旦匹配到.js文件就使用babel-loader进行处理，如前文所述，babel-loader调用babel-core的api使用bable-preset-env的规则进行转码。

这里并没有使用entry、output这样的参数，这是webpack4.x有默认的入口和出口，本项目无须改变，因此便不必进行设置。

4.检测是否配置成功

执行命令：npm run dev

检查带有es6代码的方法是否成功执行。