webpack4搭建vue项目（2）

1.新建文件夹

mkdir wepack-vue //文件名字可以随便复制代码

2.新建package.json文件

npm init -y复制代码

3.webpack配置

新建build文件夹

mkdir 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

         
  复制代码

下载webpack webpack-dev-server webpack-cli

npm i webpack webpack-dev-server webpack-cli -D复制代码

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

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: { } }复制代码

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，否则不兼容

npm i babel-loader babel-core babel-preset-env@7 -D复制代码

rules:[ { test: /.js$/, use: ['babel-loader'], exclude: /node_modules/ } ]复制代码

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

{ "preset": [ ['env',{ "targets": {// 指定转译到那个环境 //浏览器环境 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"], }, //是否将ES6的模块化语法转译成其他类型 "modules": false }] ] }复制代码

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

npm i file-loader -D复制代码

rules:[ { test: /.(jpg|png|svg|gif)/', use: ['file-loader'] },]复制代码

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

npm i css-loader vue-style-loader sass-loader node-sass -D复制代码

rules:[ { test: /.(sa|sc|c)ss$/, use: [ {loader: 'vue-style-loader'}, 'css-loader', 'sass-loader' ] }, ]复制代码

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

npm i less-loader less -D复制代码

rules:[ { test: /.less$/, use: [ {loader: 'vue-style-loader'}, 'css-loader', 'less-loader' ] }, ]复制代码

5.生成 html 文件

• 下载html-webpack-plugin，并配置

npm i html-webpack-plugin -D复制代码

// 引入html-webpack-plugin var HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__diename, '../index.html') }), ]复制代码

6.配置解析模块

resolve: { // 能够使用户在引入模块时不带扩展 extensions: ['.js', '.json', '.vue', 'css'] }复制代码

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

7.配置webpack.dev.conf

• 下载 webpack-merge

npm i webpack-merge -D复制代码

• webpack.dev.js

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(), //开启热更新 ] })复制代码

8.配置webpack.prod.conf

• webpack.prod.conf.js

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: [ ] })复制代码

9.配置vue-loader

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

npm i vue vue-loader vue-template-compiler -D
 复制代码

var VueLoaderPlugin = require('vue-loader/lib/plugin'); // 省略代码...... rules:[ { test: /.vue$/, use: ['vue-loader'], exclude: /node_modules/ }, ] // 省略代码.......复制代码

// 省略代码.... plugins: [ new VueLoaderPlugin(), // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块 ] // 省略代码...复制代码

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

// 省略代码... reslove: { alias: [ 'vue/pre>: 'vue/dist/vue.esm.js', //配置别名 确保webpack可以找到.vue文件 '@': path.resolve(__dirname, '../src') ] }复制代码

• 新建App.vue文件

   复制代码

• 在main.js中引入vue

import VUe from 'vue' import App from './App' new Vue({ el: "#app", render: (h) => h(App) })复制代码

10.配置命令

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

// 省略代码。。。 "scripts": { "dev": "webpack-dev-server --progress --config build/webpack.dev.conf.js", "build": "webpack --config build/webpack.prod.conf.js" }复制代码

• 运行项目

npm run dev复制代码

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

webpack4构建vue项目（二）

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

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

dev.env.js 开发环境配置

'use strict' module.exports = { NODE_ENV: '"development"', BASE_API: '"http://1456"', }复制代码

prod.env.js 生产环境配置

'use strict' module.exports = { NODE_ENV: '"production"', BASE_API: '"http://123.com"', }复制代码

12.优化webpack配置

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

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

npm i clean-webpack-plugin -D复制代码

// 引入clean-webpack-plugin var CleanWebpackPlugin = require('clean-webpack-plugin'); // 省略代码。。。。 plugins: [ new CleanWebPackPlugin(); ]复制代码

• 根据不同环境提取css

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

npm i mini-css-extract-plugin -D复制代码

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

module: { rules: [ { test: /.(c|sc|sa)ss/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'less-loader' ] } ] }, 复制代码

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

new MiniCssExtractPlugin({ filename: '[name].[hash].js' })复制代码

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

module: { rules: [ { test: /.(c|sc|sa)ss/, use: [ { loader: 'vue-style-loader', }, 'css-loader', 'less-loader' ] } ] },复制代码

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

• 第三方库单独打包

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

下载autodll-webpack-plugin

npm i autodll-webpack-plugin -D复制代码

在webpack.base.conf.js中配置

var AutodllWebpackpackPlugin = require('autodll-webpack-plugin'); plugins: [ new AutodllWebpackpackPlugin ({ inject: true, debugger: true, filename: '[name].js', path: './dll', entry: { vendor: ['vue'] } }) ]复制代码

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

• 提取公共代码

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

new webpack.optimize.SplitChunksPlugin()复制代码

• 打包时压缩js和css

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

npm i uglifyjs-webpack-plugin uglifyjs-webpack-plugin -D复制代码

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

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({}) ] },复制代码

• css自动加前缀

下载postcss-loader 和autoprefixer

npm i postcss-loader autoprefixer -D复制代码

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

use: [
 'postcss-loader'
 ]复制代码

在项目下增加postcss.config.js

// 配置cssz加前缀 module.exports = { plugins: [ require('autoprefixer') ] }复制代码

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