Vue official provides vuE-CLI scaffolding, integrated with Webpack environment, hands-on development and construction is very convenient. But vuE-CLI is suitable for single-page application, and usually do the project is often multi-page, online see a lot of Webpack multi-page configuration, encountered a lot of pits in the middle, look at the document, to make this multi-page mall template.

Project template effect:

Project open source on Github, welcome star. Making the address

The online preview: making. Czero. Cn/store/index…

Project description

Static pages are used for ali team’s REM and Flex flex layouts.

The store data is used to request local JSON files using AXIos and render them using Vue.

The project is placed on Github. I am willing to communicate with you. Welcome star

Webpack document

https://doc.webpack-china.org/guides/

webpack.config.js

const path = require("path"); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); */ const ExtractTextPlugin = require("extract-text-webpack-plugin"); /* Extract CSS into a separate file */ const HtmlWebpackPlugin = require('html-webpack-plugin'); /* generate HTML */ const CopyWebpackPlugin = require('copy-webpack-plugin'); Copy the file * / / * const CommonsChunkPlugin = the require (" webpack/lib/optimize/CommonsChunkPlugin "); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); / * streamline o * / module. Exports = {entry: {rem: '. / js/rem. Js', dynamic calculation rem * / * / swiper: '. / js/swiper. Js', / * * / index by plug-ins: '. / js/index. Js', / * * home page/detail: '. / js/detail. Js', / * * / category details page: '. / js/category. Js', classification / * * / cart: '. / js/cart. Js', the shopping cart * / * / member: '. / js/member. Js', / * member page * / address: '. / js/address. Js', / * * / addaddress address list page: '. / js/addaddress. Js', / * * / datacity add address: '. / js/datacity. Js', / * 3 linkage address data * / order: '. / js/order. Js' order / * * /}, devtool: 'inline-source-map', // enable debug mode output: {path: path.resolve(__dirname, "./build"), filename: ". / js / [name] [8] chunkhash: js ", / / output files to hash value}, the module: {loaders: [{test: / (\. JSX | \. Js) $/, use: {loader: "babel-loader", options: { presets: [ "es2015" ] } }, exclude: /node_modules/ }, { test: /(\.less|\.css)$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "CSS - loader! Less - loader! Postcss - loader",})}, {/ / extraction HTML img files inside the test: / \. (HTM) | HTML $/ I, loader: 'HTML - withimg - loader,}, {/ / picture packaging test: (\. JPG | \. PNG | \. GIF | \. Jpeg) $/, use: {loader:' file - loader, the options: { outputPath: 'icon', name:'[name].[ext]', useRelativePath:true } } }, ] }, plugins: [new webpack.BannerPlugin(' all, New ExtractTextPlugin('./ CSS /[name].[chunkhash:8].css'), // new UglifyJSPlugin(), New code compression webpack. Optimize. UglifyJsPlugin ({compress: {warnings: false}}), / / HTML file output new HtmlWebpackPlugin ({title: 'home ', filename: 'index.html', template: './index.html', chunks: ['rem','index','swiper'], hash:true, cach:true, minify:{caseSensitive:false, // whether caseSensitive removeComments:true, / / remove annotation removeEmptyAttributes: true, / / remove empty attributes collapseWhitespace: true / / whether to remove the blank space}, inject: 'body'}), New HtmlWebpackPlugin({title:' classification ', filename: './pages/category.html', template: './pages/category.html', chunks: ['rem','category']}), new HtmlWebpackPlugin({title:' cart ', filename: 'pages/cart.html', template: 'Pages /cart.html', chunks: ['rem','cart']}), new HtmlWebpackPlugin({title:' personal center ', filename: 'pages/member.html', template: 'pages/member.html', chunks: ['rem','member']}), new HtmlWebpackPlugin({title:' pages/detail.html', filename: 'pages/detail.html', template: 'pages/detail.html', chunks: ['rem','detail']}), new HtmlWebpackPlugin({title:' address list ', filename: 'pages/address.html', template: 'pages/address.html', chunks: ['rem','address']}), new HtmlWebpackPlugin({title:' addaddress ', filename: 'pages/addaddress.html', template: 'pages/addaddress. HTML ', chunks: ['rem',' addAddress ','datacity']}), new HtmlWebpackPlugin({title:' order details ', filename: 'pages/order.html', template: 'pages/order.html', chunks: ['rem','order'] }), new CopyWebpackPlugin([{ from: __dirname + '/data', to:'data/' }]), new CommonsChunkPlugin({ name:"rem", }), New CleanWebpackPlugin(['build']) // global reference jquery externals: {jquery: $',}, // To build the configuration of the local server, you need to activate devServer in 'package.json' : {contentBase:'./build', historyApiFallback: True,// No jump to inline: true,// real-time refresh,},}Copy the code

Loader configuration:

Babel-loader: converts es6 output to ES5 less-loader: converts less to CSS html-withimg-loader: extracts the IMG file in HTML to the folder after compilation File-loader: converts the image to base64Copy the code

Configure plugin plugin:

UglifyJSPlugin: compress the code every time you compile. HtmlWebpackPlugin: Specifies a template, CommonsChunkPlugin: Extract common JS files. CleanWebpackPlugin: Clean up the previous package files before each compilationCopy the code

externals

Configuring global jqueryCopy the code

devServer:

Installing DevServer allows you to build a local server and refresh the page automatically with every change and saveCopy the code

postcss.config.js

Postcss is configured mainly to solve the problem that CSS styles are compatible with some browsers and will automatically add suffixes to youCopy the code