一、初始化项目

在命令行中敲入如下命令：

mkdir Webpack-Vue && cd Webpack-Vue && npm init -y

然后你就可以在你的当前路径下看到一个叫 Webpack-Vue 的文件夹，里面有一个包含默认信息的 package.json 文件，打开并修改这个文件的一些内容。

然后我们在项目文件夹中创建以下几个文件夹：

dist
src、src/components、src/assets
build

Linux 下可以输入一下命令进行快速创建：

mkdir src src/components dist build -p

其中，dist 用于存放 Webpack 打包后的项目文件、src 用于存放你的源代码文件、build 用于存放 Webpack 打包相关的配置文件。

在 src 下，创建入口文件 index.js。

Linux 下创建的命令：

touch ./src/index.js

在根目录下创建 index.html 文件，内容如下：

<!DOCTYPE html>
<html><head><title>Webpack Vue Demo</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="root"></div></body>
</html>

这将用于作为我们应用的模板，打包的 js 文件会在 Webpack 插件的处理下插入到这个文件中。

其他配置性文件根据你自己的喜好来添加了，比如 .gitignore 文件等。

二、安装 Webpack

要使用 Webpack，第一步当然是先安装。使用以下命令进行安装：

npm i webpack webpack-cli -D

然后你就可以看到你的项目文件夹中多了一个 node_modules 文件夹，然后 package.json 文件中多了一个 devDependencies 属性。里面包含了安装的依赖名称和依赖版本，现在暂时还只有 webpack 和 webpack-cli。

三、配置最基本的 Webpack

这一节我们将着手配置一个具有最基本打包功能的项目，从 src/index.js 开始对项目进行打包。

为了项目结构更加科学合理，我们把所有的 Webpack 配置相关的文件都存放在了 build 目录中。

进入 build 文件夹，然后创建以下几个文件：

webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js
build.js

在 Linux 中，可以敲入如下命令快速创建：

cd build/ && touch webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js build.js

其中，webpack.base.conf.js 是最基础的打包配置，是开发环境和生产环境都要用到的配置。webpack.dev.conf.js 就是在开发环境要使用的配置。webpack.prod.conf.js 就是在生产环境要使用的配置了。build.js 是通过 Node 接口进行打包的脚本。

接下来我们在对应的文件中写入最基本的配置信息。

（1） webpack.base.conf.js

先写最基本的配置信息：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: {bundle: path.resolve(__dirname, '../src/index.js')},output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[hash].js'},module: {rules: []},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, '../index.html')})]
};

（2） webpack.dev.conf.js

同样写入最基本的配置信息：

const merge = require('webpack-merge');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {mode: 'development',devtool: 'inline-source-map',devServer: {contentBase: path.resolve(__dirname, '../dist'),open: true}
});

（3） webpack.prod.conf.js

继续写入最基础的配置：

const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {mode: 'production',devtool: 'source-map',module: {rules: []},plugins: [//2.0新版本写法，只能传一个对象进去new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), 'dist/*')],}),]
});

注意到我们上面引用了两个新的依赖，需要先进行安装才能使用：

npm i webpack-merge clean-webpack-plugin webpack-dev-server html-webpack-plugin -D

(4) build.js

这个脚本用于构建生产环境，开发环境基于 webpack-dev-server 搭建，不写脚本。

接下来，写入我们的打包脚本，通过 Node 调用 Webpack 进行打包。

const webpack = require('webpack');
const config = require('./webpack.prod.conf');
webpack(config, (err, stats) => {if (err || stats.hasErrors()) {// 在这里处理错误console.error(err);return;}// 处理完成console.log(stats.toString({chunks: false,  // 使构建过程更静默无输出colors: true,    // 在控制台展示颜色modules: false,children: false,chunkModules: false}));console.log('编译完成！')
});

这样做的好处是可以利用 Node 做一些其他的事情，另外当 Webpack 配置文件不在项目文件夹根部时方便调用。

（5） npm scripts

配置 npm scripts 能够使我们更方便的使用打包命令。

在 package.json 文件的 scripts 属性中，写入如下两条：

"build": "node build/build.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

基本的配置写完了，我们测试一下打包效果，在 src/index.js 中写入如下代码：

console.log('index.js!');

然后在命令行中输入：

npm run dev

在自动打开的网页中，我打开控制台，我们可以看到输出了一句“index.js”，符合预期。

然后输入构建命令进行构建：

npm run build

截图如下：

这就表示打包成功了，但是我们还只完成了最基本的打包功能，Vue 还不能使用，接下来我们将这个项目变得更加强大。

四、引入一些基础的 Loader

为了方便开发，我们需要引入一些 Loader，以简化我们的写法以及使我们的代码兼容更多的环境。

这一部分可以根据 Webpack 的文档来写，因为都是一些基本的东西，配置起来也不难。

（1）babel-loader

为了使我们的 JavaScript 代码兼容更多环境，我们需要使用 babel-loader。

配置方法：

首先安装 babel-loader、babel-preset-env 和 babel-core。需要注意的是，如果你的 babel-loader 是 7.x 版本的话，你的 babel-core 必须是 6.x 版本；如果你的 babel-loader 是 8.x 版本的话，你的 babel-core 必须是 7.x 版本。如果不这样的话，Webpack 会报错。

安装命令如下：

npm i babel-loader@7 babel-core babel-preset-env -D

然后在 webpack.base.conf.js 的 module.rules 中新增如下对象：

{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/
}

我们还需要添加一个配置文件（.babelrc）在根目录下：

{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}]]
}

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

以上代码表示我们要求代码兼容最新两个版本的浏览器，不用兼容 IE 8，另外市场份额超过 1% 的浏览器也必须支持。

只需要告诉 babel-preset-env 你想要兼容的环境，它就会自动转换，是不是很爽？再也不用配置那么多了。

接下来我们试一试，把 src/index.js 中的代码改写为：

const x = 'index.js';
const y = (x) => {console.log(x);
}
y(x);

然后使用 npm run build 进行打包，打包之后的代码中：

var x = 'index.js';
var y = function y(x) {console.log(x);
};
y(x);

说明我们的代码已经被成功地转换了。

为了做一个对比，未配置 babel 时，转换结果如下：

const x = 'index.js';
const y = (x) => {console.log(x);
}
y(x);

（2）file-loader

这个用于将字体文件、图片文件进行模块化。

首先安装 file-loader：

npm i file-loader -D

然后在 webpack.base.conf.js 中添加如下配置到 module.rules：

{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']
},
{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader']
}

当然可以简化配置信息，把两个 test 正则合并到一处。

接下来我们配置 vue-loader。

（3） vue-loader

为了使用 Vue 单文件组件，我们需要对 .vue 文件进行处理，使用 vue-loader。

首先安装 vue-loader、css-loader、vue-style-loader 和 vue-template-compiler，后者也是必不可少的，少了会报错。

命令：

npm i vue-loader css-loader vue-style-loader vue-template-compiler -D

然后我们配置 webpack.base.conf.js，写入以下代码到该文件的 module.rules 属性当中：

{test: /\.vue$/,loader: 'vue-loader'
},
{test: /\.css$/,use: ['vue-style-loader', 'css-loader']
}

只有这一处配置是不行的，根据 vue-loader 官网的说明，我们还需要配置一个插件，然后还需要配置 resolve.alias 别名，不然 Webpack 没法找到 Vue 模块。

配置插件，首先在文件头部引入：

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

然后在 plugins 数组中添加这个插件对象：

new VueLoaderPlugin(),

随后我们还要配置别名，将 resolve.alias 配置为如下对象：

{'vue$': 'vue/dist/vue.esm.js','@': path.resolve(__dirname, '../src'),
}

这可以使得 Webpack 很方便的找到 Vue，我们在 JavaScript 文件中引入依赖的时候，也可以方便地使用 @ 来代替 src，省去了写文件路径的麻烦。

我们顺便添加一个 resolve.extensions 属性，方便我们引入依赖或者文件的时候可以省略后缀：

extensions: ['*', '.js', '.json', '.vue', 'less', 'css'],

extensions 属性是一个数组。这样配置之后，我们在 JavaScript 文件中 import JavaScript 文件、json 文件和 Vue 单文件组件、less/css文件都可以省略后缀。

以上几步都很重要，最好不要省略。

接下来我们验证一下 Vue 单文件组件是否可用。

安装 Vue：

npm i vue --save

然后修改 index.js 文件内容如下：

import Vue from 'vue';
import App from './App';new Vue({el: '#root',template: '<App/>',components: { App }
});

然后在同级目录下创建一个 App.vue 文件，内容如下：

<template><h1>Hello World!</h1>
</template><script>export default {name: 'App'}
</script><style>html, body {padding: 0;margin: 0;box-sizing: border-box;font-size: 16px;}
</style>

运行命令 npm run dev 就可以看到一个大大的一级标题 —— Hello World 啦！

到这里，我们的项目已经可以使用 Vue 单文件组件进行开发了，但是还没有完，我们还有一些任务要做。

五、优化 CSS 代码

这里我们使用 postcss 的 autoprefixer 插件为我们的 css 代码自动添加前缀以适应不同的浏览器。

首先安装依赖：

npm i postcss-loader autoprefixer -D

然后修改 module.rules 中的 css 配置项，修改之后如下:

{test: /\.css$/,use: ['vue-style-loader', 'css-loader', 'postcss-loader']
}

然后在我们项目的根目录下新增配置文件 postcss.config.js，内容如下：

module.exports = {plugins: [require('autoprefixer')]
}

代表我们将要使用 autoprefixer 插件。

之后我们就可以愉快地写代码了，可以自己验证一下是否自动添加了前缀，这里不再赘述。

六、开启热更新

Webpack 4 开启热更新相对容易，具体步骤如下：

修改 webpack.dev.conf.js，在 devServer 属性中设置 hot 的值为 true，这就代表开启了热更新。但是只这样做还不够，需要我们添加一个插件，继续修改 webpack.dev.conf.js。

设置其 plugins 属性如下：

const webpack = require('webpack');
// 在文件头部引入 webpack 依赖
[new webpack.HotModuleReplacementPlugin()
]

这就开启了 css 热更新（因为 vue-style-loader 封装了 style-loader，热更新开箱即用）,但是 JavaScript 热更新还不能用，每次修改代码我们都会刷新浏览器，所以我们需要继续配置。

为了使得 JavaScript 模块也能进行 HMR，我们需要在我们的入口文件（index.js/main.js）的底部添加如下代码：

if (module.hot) {module.hot.accept();
}

接下来就可以进行 HMR 了。

七、第三方库单独打包

每次我们对项目进行打包时，我们都会把引用的第三方依赖给打包一遍，比如 Vue、Vue-Router、React 等等。但是这些库的代码基本都是不会变动的，我们没必要每次打包都构建一次，所以我们最好将这些第三方库提取出来单独打包，这样有利于减少打包时间。

官方插件是 DllPlugin。网上有人推荐一个比较好用的插件 —— autodll-webpack-plugin。不推荐这个(打包后有路径问题)，个人推荐官方的dllPlugin

下面是它的配置方法autodll-webpack-plugin：

首先安装：

npm i autodll-webpack-plugin -D

然后在 webpack.base.conf.js 中引入：

const AutoDllPlugin = require('autodll-webpack-plugin');

然后在 plugins 属性中添加这个插件：

new AutoDllPlugin({inject: true, // will inject the DLL bundle to index.htmldebug: true,filename: '[name]_[hash].js',path: './dll',entry: {vendor: ['vue', 'vue-router', 'vuex']}
})

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

每次打包，这个插件都会检查注册在 entry 中的第三方库是否发生了变化，如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。

下面重点讲下dllPlugin

1.在原来的打包配置文件基础上面，我们需要新建一个webpack.dll.conf.js文件。

配置如下：

//  webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {mode: 'production',entry: {vendor: ['vue/dist/vue.esm.js',//提前打包一些基本不怎么修改的文件  一般都是放生产环境要用到的第三方库// 'vue-router',// 'vuex',// 'element-ui',]},output: {path: path.resolve(__dirname, '../static/dll/js'), //放在项目的static/dll/js目录下面filename: '[name]_[hash].dll.js', //打包文件的名字library: '[name]_library' //可选 暴露出的全局变量名// vendor.dll.js中暴露出的全局变量名。// 主要是给DllPlugin中的name使用，// 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。},plugins: [new webpack.DllPlugin({path: path.join(__dirname, '../static/dll', '[name]-manifest.json'), //生成上文说到清单文件，放在static/dll文件下面，这个看你自己想放哪里了。name: '[name]_library'}),]
};

2.在webpack.prod.conf.js文件需要做如下修改，在plugins下面加入如下代码：add-asset-html-webpack-plugin

// +++  这个依赖需要 npm 下
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
// +++plugins: [//+++//这个是基于webpack的，要引入webpacknew webpack.DllReferencePlugin({context: path.resolve(__dirname, '..'), manifest: require('../static/vendor-manifest.json')}),new AddAssetHtmlPlugin({filepath: path.resolve(__dirname,'../static/js/*.dll.js')}),//+++
]

3.修改package.json中的 "scripts" 添加一个命令

"build:dll": "webpack --config build/webpack.dll.conf.js",

4.执行

npm run build:dll  //这个命令在最初执行一次之后，之后发布都不需要再重复执行了，除非webpack.dll.conf.js里面的依赖文件有升级。
//发布之前的打包
npm run build

八、提取共同代码：

使用 splitChucksPlugin 插件，这是 Webpack 自带的，不用安装第三方依赖。

使用方法：

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

new webpack.optimize.SplitChunksPlugin()

这代表你将使用默认的提取配置来提取你的公共代码，如果你不想使用默认配置，请给插件构造函数传入配置对象.

具体怎么配置，请参考冷星大神的博客 —— webpack4——SplitChunksPlugin使用指南，里面关于配置项的作用介绍得很清楚很详细。

九、使用 less 预处理器

我个人比较喜欢 less，而且用起来也不是很复杂。

引入方法：

首先下载 less 和 less-loader 依赖：

npm i less less-loader -D

然后在配置项 module.rules 中添加一个处理 less 文件的配置对象。

配置信息如下：

{test: /\.less$/,use: ['vue-style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}

接下来只要你在 Vue 单文件组件的 style 标签加上 lang='less'，你就可以使用 less 来写 CSS 了。

十、抽取 CSS 到单文件

这个功能的配置方法在 Vue Loader 官网交代得很清楚了。

使用的是 mini-css-extract-plugin 插件，首先安装：

npm i mini-css-extract-plugin -D

然后在配置文件头部引入：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

然后当你要抽取 CSS 的时候（比如生产环境打包），你就把原来配置文件中的所有 vue-style-loader 替换为 MiniCssExtractPlugin.loader，其他的什么 css-loader、less-loader 等等都不要动。

注意：写在生产环境配置中，不然会影响开发环境的热更新

最后，修改 plugins 选项，插入如下插件：

new MiniCssExtractPlugin({filename: "./css/[name].css",chunkFilename: "[id].css"
})

打包之后，你会发现所有的 CSS 代码都被抽取到了一个单独的 CSS 文件当中。

十一、图片压缩

使用：配置image-webpack-loader

npm 一下

npm i image-webpack-loader -D

然后配置module.rules

{test: /\.(png|svg|jpg|gif)$/,use: [{loader: 'url-loader',options: { // 这里的options选项参数可以定义多大的图片转换为base64name: '[name].[ext]',limit: 20000, // 表示小于50kb的图片转为base64,大于50kb的是路径outputPath: 'images' //定义输出的图片文件夹}},{ //压缩图片要在file-loader之后使用loader: 'image-webpack-loader',options: {bypassOnDebug: true}}]
}

十二、输出目录整理

到这步，基本上是重头到尾OK了，但是有点忍不了，npm run build后的dist文件夹好乱，js/css/font/html/img全在一起，mmp什么情况及，强迫症完全忍受不了

1.设置webpack.base.conf.js中的 output.filename 赋值 ./js/[name].[hash].js

2.设置font字体的输出路径 webpack.base.conf.js 中的 module.rules 中

      {test: /\.(woff|woff2|eot|ttf|otf)$/,use: [{loader: 'file-loader',options: {name: './fonts/[name]-[hash].[ext]'//这个是重点}}]},

3.设置图片输出位置

      {test: /\.(png|svg|jpg|gif)$/,use: [{loader: 'url-loader',options: { // 这里的options选项参数可以定义多大的图片转换为base64name: '[name].[ext]',limit: 20000, // 表示小于50kb的图片转为base64,大于50kb的是路径outputPath: './images' //定义输出的图片文件夹}},{ //压缩图片要在file-loader之后使用loader: 'image-webpack-loader',options: {bypassOnDebug: true}}]},

4.设置css输出路径

注意点，修改 MiniCssExtractPlugin 中的配置

new MiniCssExtractPlugin({filename: "./css/[name].css",//这里是重点chunkFilename: "[id].css"})

5.设置我们之前单独打包的第三方库的输出

注意点，修改AddAssetHtmlPlugin 中的配置

new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname,'../static/dll/js/*.dll.js'),publicPath: "./js",//这个是index.html模版引入的路径，一般都配合outputPath用outputPath: './js'//这个是第三方库打包后的输出路径，一般都配合publicPath用}),

来源：

从零开始搭建webpack的vue生成/开发环境

参考：
webpack4搭建Vue开发环境笔记

从零开始搭建webpack的vue生产/开发环境相关推荐

【WebPack】引入Vue；认识Plugin；使用uglifyjs丑化JS代码；搭建本地服务器；生产开发环境配置文件的抽离
Vue实战 - 配套源码 npm install --save-dev vue-loader vue-template-compiler 可能会报错如下: 以上报错解决方式:修改版本^13.0.0,然 ...
《从零开始搭建游戏服务器》Linux开发环境配置
前言: 之前的开发工作一直是在Windows开发环境下进行的,但是正真发布和外网运营势必要发布到Linux环境下,而且有很多服务端的工具对于Windows系统的兼容性并不是非常完善,就像常用的Dock ...
从零开始搭建基于Xcode7的IOS开发环境和免开发者帐号真机调试运行第一个IOS程序HelloWorld
首先这篇文章比较长,若想了解Xcode7的免开发者帐号真机调试运行IOS程序的话,直接转到第五部分. 转载请注明原文地址:http://www.cnblogs.com/litou/p/4843772. ...
vscode运行html的插件_vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,edit ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？
[vue-cli]不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么? 基本概念首先先了解先webpack的基本概念,webpack属于一个构建工具,主要有mode.entry.out ...
【从零开始人工智能01】人工智能运行开发环境搭建
从零开始人工智能系列: 人工智能运行开发环境搭建第一个人工智能小程序:强化学习找金币人工智能运行开发环境搭建一.系统要求操作系统为Win10.如果有条件的话,建议还是在Linux系统下搭建人工 ...
前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
vue2.0---搭建vue的开发环境
vue2.0---搭建vue的开发环境一.NPM 使用介绍测试node是否安装完成 cnpm介绍安装cnpm 如果检测失败出现:***权限问题 Powershell 脚本运行的几种权限: 二.命 ...

从零开始搭建webpack的vue生产/开发环境