webpack4搭建vue项目（2）

1.新建文件夹

<pre style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border-width: 1px 0px; border-right-style: initial; border-left-style: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(240, 240, 240); border-bottom-style: solid; border-bottom-color: rgb(240, 240, 240); padding: 10px 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">mkdir wepack-vue //文件名字可以随便复制代码</pre>

2.新建package.json文件

3.webpack配置

新建build文件夹

build文件夹新建webpack.base.conf.js，webpack.dev.conf.js，webpack.prod.conf.js

webpack.base.conf.js 存放公共配置
webpack.prod.conf.js 存放生产环境配置
webpack.dev.conf.js 存放开发环境配置

创建src文件夹并创建main.js

创建index.html

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack搭建vue项目</title> </head> <body> <div id="app"></div> </body> </html>复制代码</pre>

下载webpack webpack-dev-server webpack-cli

<pre style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border-width: 1px 0px; border-right-style: initial; border-left-style: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(240, 240, 240); border-bottom-style: solid; border-bottom-color: rgb(240, 240, 240); padding: 10px 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm i webpack webpack-dev-server webpack-cli -D复制代码</pre>

打开webpack.base.config.js，并配置webpack整体属性

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); module.exports = { entry: { main: path.resolve(__dirname, '../src/main.js') }, output: { path: path.resolve(__dirname, '../src'), filname: '[name].[bash].js', }, module: { rules: [] }, pligins: [ new webpack.HashedModuleIdsPlugin(), // 解决vender后面的hash每次都改变 ], resolve: { } }复制代码</pre>

4.配置loader

下载babel-loader，babel-core，babel-preset-dev，rules并配置js

babel-preset-env 帮助我们配置 babel。我们只需要告诉它我们要兼容的情况（目标运行环境），它就会自动把代码转换为兼容对应环境的代码。

babel-core是作为babel的核心存在，babel的核心api都在这个模块里面

tips: babel是7.X的话babel-core必须是6.X，否则不兼容

新建.babelrc文件，.babelrc是babel全局配置文件

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">{ "preset": [ ['env',{ "targets": {// 指定转译到那个环境 //浏览器环境 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"], }, //是否将ES6的模块化语法转译成其他类型 "modules": false }] ] }复制代码</pre>

下载file-loader，rules并配置文件（图片和字体）

下载css-loader，vue-style-loader，sass-loader， node-sass，并配置css，scss，sass

下载less，less-loader，并配置less

5.生成 html 文件

下载html-webpack-plugin，并配置

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 引入html-webpack-plugin var HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__diename, '../index.html') }), ]复制代码</pre>

6.配置解析模块

base模块配置了一些东西但没有配置完，会在后边一点一点加上，接下来配置dev和prod

7.配置webpack.dev.conf

下载 webpack-merge

webpack.dev.js

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var merge = require('webpack-merge'); var baseConfig = require('./webpack.base.conf'); var path = require('path'); var webpack = reuire('webpack'); module.exports = merge(baseConfig, { devtool: 'inline-source-map', // 压缩方式 mode: 'development' devServer: { hot: true, // 热更新 open: true, // 自动打开页面 contentBase: path.resolve(__dirname, '../dist'), // 告诉服务从哪提供内容 }, plugins: [ new.webpack.HotModuleReplacementPlugin(), //开启热更新 ] })复制代码</pre>

8.配置webpack.prod.conf

webpack.prod.conf.js

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var merge = require('webpack-merge'); var baseConfig = require('./webpack.base.conf'); var path = require('path'); var webpack = reuire('webpack'); module.exports = merge(baseConfig, { devtool: 'source-map', // 压缩方式 mode: 'production' plugins: [ ] })复制代码</pre>

9.配置vue-loader

下载vue-loader，vue，vue-template-compiler, 并配置vue解析文件，配置webpack.base.cond.js

<pre style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border-width: 1px 0px; border-right-style: initial; border-left-style: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(240, 240, 240); border-bottom-style: solid; border-bottom-color: rgb(240, 240, 240); padding: 10px 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm i vue vue-loader vue-template-compiler -D
复制代码</pre>

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var VueLoaderPlugin = require('vue-loader/lib/plugin'); // 省略代码...... rules:[ { test: /.vue$/, use: ['vue-loader'], exclude: /node_modules/ }, ] // 省略代码.......复制代码</pre>

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 省略代码.... plugins: [ new VueLoaderPlugin(), // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块 ] // 省略代码...复制代码</pre>

配置vue别名，确保webpack可以找到.vue文件

新建App.vue文件

在main.js中引入vue

10.配置命令

找到package.json文件，并配置开发和打包命令

运行项目

可以看到项目已经跑起来了

webpack4构建vue项目（二）

11. 区分环境引入不同地址

新建config文件夹并新建dev.ev.js和prod.env.js

dev.env.js 开发环境配置

prod.env.js 生产环境配置

12.优化webpack配置

解决更改文件打包时dist文件没有清除，再次打包。

下载clean-webpack-plugin，并配置webpack.prod.conf.js文件

根据不同环境提取css

下载mini-css-extract-plugin，并配置webpack.prod.conf.js文件

更改webpack.prod.conf.js中使用vue-style-loader的代码，更改为

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">module: { rules: [ { test: /.(c|sc|sa)ss $/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'sass-loader' ] }, { test: /\.less$ /, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'less-loader' ] } ] }, 复制代码</pre>

在webpack.prod.conf.js的plugin中配置

webpack.base.conf.js中删除使用vue-style-loader的代码，并在webpack.dev.conf.js中定义

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">module: { rules: [ { test: /.(c|sc|sa)ss $/, use: [ { loader: 'vue-style-loader', }, 'css-loader', 'sass-loader' ] }, { test: /\.less$ /, use: [ { loader: 'vue-style-loader', }, 'css-loader', 'less-loader' ] } ] },复制代码</pre>

这个配置vue-loader中有提到 vue-loader.vuejs.org/zh/guide/ex…

第三方库单独打包

把依赖的第三方库抽取出来单独打包，加快打包进度

下载autodll-webpack-plugin

在webpack.base.conf.js中配置

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var AutodllWebpackpackPlugin = require('autodll-webpack-plugin'); plugins: [ new AutodllWebpackpackPlugin ({ inject: true, debugger: true, filename: '[name].js', path: './dll', entry: { vendor: ['vue'] } }) ]复制代码</pre>

tips: inject 为 true，插件会自动把打包出来的第三方库文件插入到 HTML。 filename 是打包后文件的名称。 path 是打包后的路径。 entry 是入口， vendor 是你指定的名称，数组内容就是要打包的第三方库的名称，不要写全路径，Webpack 会自动去 node_modules 中找到的。

提取公共代码

在 webpack.base.conf.js的 plugins 属性中添加如下插件对象

<pre style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border-width: 1px 0px; border-right-style: initial; border-left-style: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(240, 240, 240); border-bottom-style: solid; border-bottom-color: rgb(240, 240, 240); padding: 10px 15px; border-radius: 0px;">new webpack.optimize.SplitChunksPlugin()复制代码</pre>

打包时压缩js和css

下载optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin

在webpack.prod.conf.js中分别引入optimize-css-assets-webpack-plugin和uglifyjs-webpack-plugin并增加optimization

<pre class="prettyprint prettyprinted" style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border: none; padding: 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); var UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // ...省略号
optimization: { minimizer: [ // 压缩JS new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 去除警告 drop_debugger: true, // 去除debugger drop_console: true // 去除console.log }, }, cache: true, // 开启缓存 parallel: true, // 平行压缩 sourceMap: false // set to true if you want JS source maps }), // 压缩css new OptimizeCSSAssetsPlugin({}) ] },复制代码</pre>

css自动加前缀

下载postcss-loader 和autoprefixer

<pre style="box-sizing: border-box; outline-style: none; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; margin: 0px -15px 15px; overflow: auto; display: block; color: rgb(68, 68, 68); background-color: rgb(249, 249, 249); border-width: 1px 0px; border-right-style: initial; border-left-style: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(240, 240, 240); border-bottom-style: solid; border-bottom-color: rgb(240, 240, 240); padding: 10px 15px; border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.45px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm i postcss-loader autoprefixer -D复制代码</pre>

分别在webpack.dev.conf.js和webpack.prod.conf.js的use中添加 postcss-loader

在项目下增加postcss.config.js

以上配置的项目就可以跑起来了，谢谢大家，如有错误，敬请指出，一起在码农的道路上越走越远

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349