Use webpack to build vue scaffolding

This article mainly introduces you to the relevant information on how nephrite uses webpack to build a vue scaffolding. There are super detailed explanations and comments in the article, which has certain reference learning value for everyone to learn or use webpack. Friends who need it can follow Come and learn with me.

As one of the three major front-end frameworks, Vue has received 44,873 stars on github so far, which is enough to show that it has quietly become mainstream. In October 2016, Vue released version 2.x. After a period of exploration and reading official tutorials and APIs, I learned that version 2.0 made many adjustments based on version 1.0 and abandoned many APIs.

This article will introduce in detail the relevant content about using webpack to build a vue scaffolding, and share it for everyone's reference and study. I won't say much below, let's take a look at the detailed introduction.

1. Applicable people

1. Students who have a certain understanding of webpack but are not familiar with it.

2. Female students! ! ! (233333....)

II. Purpose

While I have a better understanding of webpack, I also hope to help some students who are new to webpack.

The scaffolding has been put on github. If you don’t want to hear my ramblings, you can download or clone it directly.

There are detailed notes in the scaffolding!

Source code: https://github.com/webfansplz/xc-cli.git (local download)

If you think it is helpful to your classmates, give it a star, which can be considered as a favor to me. A support!

3. Scaffolding structure

├── build  构建服务和webpack配置
 |—— build.js webpack打包服务
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack开发环境配置
 |—— webpack.prod.conf.js webpack生产环境配置
├── config  构建项目不同环境的配置
├── public  项目打包文件存放目录
├── index.html  项目入口文件
├── package.json 项目配置文件
├── static  静态资源
├── .babelrc  babel配置文件
├── .gitignore  git忽略文件
├── postcss.config.js postcss配置文件
├── src  项目目录
 |—— page  页面组件目录
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue实例入口
 |—— main.js  项目构建入口

4. Configure npm scripts

4.1 Generate package.json file and configure npm scripts.

4.1.1 Use npm init command, generate a package.json file!

npm init

4.1.2 Globally install webpack and webpack-dev-server

npm install webpack webpack-dev-server -g

4.1.3 Install webpack and webpack-dev- in the project directory server

npm install webpack webpack-dev-server -D

4.1.4 Enter package.json to configure npm scripts command

 "scripts": {
 "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 }

By configuring the above command:

We can develop locally through npm start/npm run dev ,

scripts.dev command interpretation:

Use the webpack-dev-server command to start webpack.dev.conf.js in the build folder.

You can also package the project file through npm run build for online deployment.

Interpretation of scripts.build command:

Build build.js in the build folder through the node command .

The configuration of the command can be modified according to the location and name of your own scaffolding configuration file!

5. Build a scaffolding directory

Students can build their own scaffolding directory based on their own habits and preferences. The following explanation is based on the above scaffolding structure!

6. Build config/config.js

6.1 This file is mainly used to configure the parameters that differentiate between the development environment and the production environment.

6.2

const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//vue-loader基本配置
const baseVueLoaderConf = {
 //引入postcss插件
 postcss: {
 config: {
 path: _path.resolve("../")
 }
 },
 //转为require调用,让webpack处理目标资源!
 transformToRequire: {
 video: "src",
 source: "src",
 img: "src",
 image: "xlink:href"
 }
};
//vue-loader 开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: {
 css: ["vue-style-loader", "css-loader"],
 less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"]
 },
 cssSourceMap: true
});
//vue-loader 生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: ExtractTextPlugin.extract({
 use: ["css-loader", "postcss-loader", "less-loader"],
 fallback: "vue-style-loader"
 }),
 cssSourceMap: false
});
//开发/生产环境 配置参数！
module.exports = {
 dev: {
 publicPath: "/",
 devtoolType: "cheap-module-eval-source-map",
 vueloaderConf: devVueLoaderConf,
 host: "localhost",
 port: "1234",
 proxyTable: {}
 },
 build: {
 publicPath: "/",
 devtoolType: "source-map",
 vueloaderConf: buildVueLoaderConf,
 staticPath: "static"
 }
};

Seven. Build build/webpack.base.conf.js

7.1 This file is mainly the common configuration of webpack development environment and production environment.

7.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//拼接路径
function resolve(track) {
 return path.join(__dirname, "..", track);
}
//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//webpack 基本设置
module.exports = {
 //项目入口文件->webpack从此处开始构建！
 entry: path.resolve(__dirname, "../src/main.js"),
 //配置模块如何被解析
 resolve: {
 //自动解析文件扩展名(补全文件后缀)(从左->右)
 // import hello from './hello' （!hello.js? -> !hello.vue? -> !hello.json）
 extensions: [".js", ".vue", ".json"],
 //配置别名映射
 alias: {
 // import Vue from 'vue/dist/vue.esm.js'可以写成 import Vue from 'vue'
 // 键后加上$,表示精准匹配！
 vue$: "vue/dist/vue.esm.js",
 "@": resolve("src"),
 utils: resolve("src/utils"),
 components: resolve("src/components"),
 public: resolve("public")
 }
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块！)
 rules: [
 //使用babel-loader来处理src下面的所有js文件,具体babel配置在.babelrc,主要是用来转义es6
 {
 test: /\.js$/,
 use: {
 loader: "babel-loader"
 },
 include: resolve("src")
 },
 //使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于8192字节(8kb)的图片转为DataURL(base64),
 //大于limit字节的会调用file-loader进行处理！
 //图片一般发布后都是长缓存,故此处文件名加入hash做版本区分!
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: "url-loader",
 options: {
 limit: 8192,
 name: assetsPath("img/[name].[hash:8].[ext]")
 }
 }
 ]
 }
};

eight .Build build/webpack.dev.conf.js

8.1 This file is mainly used to build the development environment

8.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack开发环境配置参数
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似！
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件！
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个编译提示的webpack插件！
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
//发送系统通知的一个node模块！
const notifier = require("node-notifier");
//将webpack基本配置与开发环境配置合并！
const devConf = merge(baseConf, {
 //项目出口,webpack-dev-server 生成的包并没有写入硬盘,而是放在内存中！
 output: {
 //文件名
 filename: "[name].js",
 //html引用资源路径,在dev-server中,引用的是内存中文件！
 publicPath: devConfig.publicPath
 },
 //生成sourceMaps(方便调试)
 devtool: devConfig.devtoolType,
 //
 //启动一个express服务器,使我们可以在本地进行开发！！！
 devServer: {
 //HMR控制台log等级
 clientLogLevel: "warning",
 // 热加载
 hot: true,
 //自动刷新
 inline: true,
 //自动打开浏览器
 open: true,
 //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
 historyApiFallback: true,
 //主机名
 host: devConfig.host,
 //端口号
 port: devConfig.port,
 //配置反向代理解决跨域
 proxy: devConfig.proxyTable,
 //为你的代码进行压缩。加快开发流程和优化的作用
 compress: true,
 // 在浏览器上全屏显示编译的errors或warnings。
 overlay: {
 errors: true,
 warnings: false
 },
 // 终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的
 quiet: true
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块！)
 rules: [
 //使用vue-loader处理以vue结尾的文件！
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: devConfig.vueloaderConf
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以css结尾的文件！
 {
 test: /\.css$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以less结尾的文件！
 {
 test: /\.less$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "less-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 }
 ]
 },
 plugins: [
 //开启HMR(热替换功能,替换更新部分,不重载页面！)
 new webpack.HotModuleReplacementPlugin(),
 //显示模块相对路径
 new webpack.NamedModulesPlugin(),
 //编译出错时,该插件可跳过输出,确保输出资源不会包含错误!
 // new webpack.NoEmitOnErrorsPlugin(),
 //配置html入口信息
 new HtmlWebpackPlugin({
 title: "hello,xc-cli!",
 filename: "index.html",
 template: "index.html",
 //js资源插入位置,true表示插入到body元素底部
 inject: true
 }),
 //编译提示插件
 new FriendlyErrorsPlugin({
 //编译成功提示！
 compilationSuccessInfo: {
 messages: [
 `Your application is running here: http://${devConfig.host}:${devConfig.port}`
 ]
 },
 //编译出错！
 onErrors: function(severity, errors) {
 if (severity !== "error") {
 return;
 }
 const error = errors[0];
 const filename = error.file.split("!").pop();
 //编译出错时,右下角弹出错误提示！
 notifier.notify({
 title: "xc-cli",
 message: severity + ": " + error.name,
 subtitle: filename || "",
 icon: path.join(__dirname, "xc-cli.png")
 });
 }
 })
 ]
});
module.exports = devConf;

8.3 By creating the above file and downloading the corresponding Depend on and create the project entry, we can develop the vue project locally through npm run dev! ! !

9. Create build/webpack.prod.conf.js

9.1 This file is mainly used to build the configuration of the production environment.

9.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似！
const merge = require("webpack-merge");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个创建html入口文件的webpack插件！
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个抽离出css的webpack插件！
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一个压缩css的webpack插件！
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一个拷贝文件的webpack插件！
const CopyWebpackPlugin = require("copy-webpack-plugin");

//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//将webpack基本配置与生产环境配置合并！
const prodConf = merge(baseConf, {
 //项目出口配置
 output: {
 //Build后所有文件存放的位置
 path: path.resolve(__dirname, "../public"),
 //html引用资源路径,可在此配置cdn引用地址！
 publicPath: prodConfig.publicPath,
 //文件名
 filename: assetsPath("js/[name].[chunkhash].js"),
 //用于打包require.ensure(代码分割)方法中引入的模块
 chunkFilename: assetsPath("js/[name].[chunkhash].js")
 },
 //生成sourceMaps(方便调试)
 devtool: prodConfig.devtoolType,
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块！)
 rules: [
 //使用vue-loader处理以vue结尾的文件！
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: prodConfig.vueloaderConf
 },
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 },
 {
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "less-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 }
 ]
 },
 plugins: [
 //每个chunk头部添加hey,xc-cli!
 new webpack.BannerPlugin("hey,xc-cli"),
 //压缩js
 new webpack.optimize.UglifyJsPlugin({
 parallel: true,
 compress: {
 warnings: false
 }
 }),
 //分离入口引用的css,不内嵌到js bundle中!
 new ExtractTextPlugin({
 filename: assetsPath("css/[name].[contenthash].css"),
 allChunks: false
 }),
 //压缩css
 new OptimizeCSSPlugin(),
 //根据模块相对路径生成四位数hash值作为模块id
 new webpack.HashedModuleIdsPlugin(),
 //作用域提升,提升代码在浏览器执行速度
 new webpack.optimize.ModuleConcatenationPlugin(),
 //抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度!
 // 1. 第三方库chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "vendor",
 minChunks: function(module) {
 //在node_modules的js文件!
 return (
  module.resource &&
  /\.js$/.test(module.resource) &&
  module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
 );
 }
 }),
 // 2. 缓存chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "manifest",
 minChunks: Infinity
 }),
 // 3.异步 公共chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "app",
 children: true,
 // (选择所有被选 chunks 的子 chunks)
 async: true,
 // (创建一个异步 公共chunk)
 minChunks: 3
 // (在提取之前需要至少三个子 chunk 共享这个模块)
 }),
 //将整个文件复制到构建输出指定目录下
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, "../static"),
 to: prodConfig.staticPath,
 ignore: [".*"]
 }
 ]),
 //生成html
 new HtmlWebpackPlugin({
 filename: path.resolve(__dirname, "../public/index.html"),
 template: "index.html",
 favicon: path.resolve(__dirname, "../favicon.ico"),
 //js资源插入位置,true表示插入到body元素底部
 inject: true,
 //压缩配置
 minify: {
 //删除Html注释
 removeComments: true,
 //去除空格
 collapseWhitespace: true,
 //去除属性引号
 removeAttributeQuotes: true
 },
 //根据依赖引入chunk
 chunksSortMode: "dependency"
 })
 ]
});
module.exports = prodConf;

10. Create build/build.js

10.1 This file is a project packaging service, used to build a fully compressed package

10.2

"use strict";
//node for loading
const ora = require("ora");
// rm-rf for node
const rm = require("rimraf");
//console for node
const chalk = require("chalk");
//path for node
const path = require("path");
//webpack
const webpack = require("webpack");
//webpack production setting
const config = require("./webpack.prod.conf");
//指定删除的文件
const rmFile = path.resolve(__dirname, "../public/static");
//build start loading
const spinner = ora("building for production...");
spinner.start();
//构建全量压缩包！
rm(rmFile, function(err) {
 if (err) throw err;
 webpack(config, function(err, stats) {
 spinner.stop();
 if (err) throw err;
 process.stdout.write(
 stats.toString({
 colors: true,
 modules: false,
 children: false,
 chunks: false,
 chunkModules: false
 }) + "\n\n"
 );
 if (stats.hasErrors()) {
 console.log(chalk.red(" Build failed with errors.\n"));
 process.exit(1);
 }
 console.log(chalk.cyan(" Build complete.\n"));
 console.log(
 chalk.yellow(
 " Tip: built files are meant to be served over an HTTP server.\n" +
  " Opening index.html over file:// won't work.\n"
 )
 );
 });
});

10.3 After creating the above files, we will We can use npm run build to package our project files and deploy them online.

Eleven. Done!

After the above steps, a spa version of vue scaffolding is complete!

If you don’t understand some details, you can leave a message or check it out on my github

Address: https://github.com/webfansplz/xc-cli.git (local download)

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About monitoring ng-repeat rendering issues in AngularJS

How to implement process progress style in WeChat applet ?

How to build helloWorld using vue-cli in vue

The above is the detailed content of Use webpack to build vue scaffolding. For more information, please follow other related articles on the PHP Chinese website!