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,敬请期待哦。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180626G16LJB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券