webpack4.x连载之webpack4.x构建vue2.0项目

上个班讲webpack构建vue项目时，用的webpack3.x版本。又带新班了，准备用webpack4.x构建，总是得紧跟上时代的步伐。现在更新一下用webpack4.x构建项目时的一些变化，并附上代码供大家参考。

大概先看看有哪些变化：

1、webpack4.x必须同时安装webpack-cli工具

2、webpack.config配置文件中新增mode，可以指定是开发环境还是生产环境。

以前如何知道是在哪个环境?需要在package.json中运行npm的scripts时,设置一个环境变量,来标识到底是开发环境还是生产环境，而设置这个变量需安装一个依赖:cnpm install cross-env，这是由于mac电脑和windows电脑上设置这个环境变量的方式不同,在mac上用NODE_ENV=production就能读取环境变量,而windows上要用set NODE_ENV=production这种方式，为了避免为不同的平台写不同的命令,就可以通过cross-env来实现

"scripts": {

}

3、删除了一些常用的内置插件

NoEmitOnErrorsPlugin、CommonsChunkPlugin（现在可以通过 optimization.splitChunks和 optimization.runtimeChunk来配置）等。。。

4、使用vue-loader加载器时，必须依赖vue-loader的plugin插件

constVueLoaderPlugin= require('vue-loader/lib/plugin');

plugins: [

newVueLoaderPlugin()

],

5、还有很多的变化，在配置的过程中遇到了，可以找度娘问问啦

下面开始用webpack4.x构建一个vue项目，步骤：

新建一个项目文件夹

初始化项目文件：npm init

安装依赖模块：

cnpm install vue-loader style-loader css-loader url-loader file-loader vue-template-compiler --save-dev

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

cnpm install babel-plugin-transform-runtime --save-dev

cnpm install babel-runtime --save

cnpm install webpack-dev-server --save-dev

在项目根目录下创建src文件夹，在该文件夹里创建：

app.vue

main.js

在项目根目录下创建：

index.html

Title

在项目根目录下创建：

//是nodejs的一个基本包，用来处理路径的，在打包项目时用绝对路径，防止出错

constpath=require("path");

//以前直接vue-loader就可以，现在必须导入这个模块，并配置这个插件才能正常编译.vue文件

constVueLoaderPlugin= require('vue-loader/lib/plugin’);

module.exports={

//入口文件的配置项

//path.join就是把dirname和后面的路径拼接起来，形成绝对路径

entry:path.join(__dirname,"src/main.js"),

//出口文件的配置

output:{

path:path.join(__dirname,"dist"),

filename:"bundle.js"

},

plugins: [

newVueLoaderPlugin()

],

module:{

rules:[

{

test:/\.vue$/,

use:['vue-loader']

},

{

test:/\.css$/,

use:['style-loader','css-loader']

},

]

}

};

修改：

package.json

{

"name":"vuestudy",

"version":"1.0.0",

"description":"",

"main":"index.js",

"scripts": {

"start":"webpack-dev-server --entry ./src/main.js --output-filename ./dist/bundle.js",

"build":"webpack --watch"

},

"author":"",

"license":"ISC",

"devDependencies": {

"babel-core":"^6.26.3",

"babel-loader":"^7.1.4",

"babel-plugin-transform-runtime":"^6.23.0",

"babel-preset-env":"^1.7.0",

"css-loader":"^0.28.11",

"file-loader":"^1.1.11",

"style-loader":"^0.21.0",

"url-loader":"^1.0.1",

"vue":"^2.5.16",

"vue-loader":"^15.2.4",

"vue-template-compiler":"^2.5.16",

"webpack":"^4.12.1",

"webpack-cli":"^3.0.8",

"webpack-dev-server": "^3.1.4",

},

"dependencies": {

"babel-runtime":"^6.26.0"

}

}

//是nodejs的一个基本包，用来处理路径的，在打包项目时用绝对路径，防止出错

constpath=require("path");

//以前直接vue-loader就可以，现在必须导入这个模块，并配置这个插件才能正常编译.vue文件

constVueLoaderPlugin= require('vue-loader/lib/plugin');

module.exports={

//入口文件的配置项

//path.join就是把dirname和后面的路径拼接起来，形成绝对路径

entry:path.join(__dirname,"src/main.js"),

//出口文件的配置

output:{

path:path.join(__dirname,"dist"),

filename:"bundle.js"

},

plugins: [

newVueLoaderPlugin()

],

module:{

rules:[

{

test:/\.vue$/,

use:['vue-loader']

},

{

test:/\.css$/,

use:['style-loader','css-loader']

},

{

test:/\.(jpg|png|gif)$/,

use:['url-loader']

},

{

test:/\.js$/,

exclude:/node_modules/,

use: {

loader:'babel-loader',

options: {

presets:['env'],

plugins:"transform-runtime"

//include表示哪些目录中的 .js 文件需要进行 babel-loader

//exclude表示哪些目录中的 .js 文件不要进行 babel-loader

一个简单的webpack4.x构建的项目完成啦，在命令行输入npm start命令可以运行在本地服务器环境中，在命令输入npm run build命令可以打包vue项目。

下一篇：为不同环境写配置文件，并配置webpack-dev-server，敬请期待哦。