Schematic diagram of project structure
webpack.config.js
// const vueLoaderPlugin = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin' Require (' vie-loader /lib/plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') // copy file const webpack = Require ('webpack') const HappyPack = require(' HappyPack ') const OS = require(' OS ') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) function resolve(dir) { return path.join(__dirname, '.. ', dir) } module.exports = { entry: path.resolve(__dirname, '.. /src/main.js'), output: { filename: 'js/[name].[hash:8].js', path: path.resolve(__dirname, '.. /dist'), chunkFilename: 'js/[name].[hash:8].js', // Async loading module publicPath: './'}, externals: {}, module: {rules: [{test: /\.vue$/, use: [{ loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false } } }] }, { test: /\.js$/, use: ['happypack/loader?id=happyBabel'], exclude: /node_modules/, include: [resolve (' SRC '), resolve (' node_modules/webpack - dev server/client ')]}, {test: / \ | PNG (jpe? G | GIF) $/ I / / picture file use: [ { loader: 'url-loader', options: { limit: 10240, fallback: { loader: 'file-loader', options: { name: 'img/[name].[hash:8].[ext]', publicPath: '../' } } } } ] }, { test: / \. (mp4 | webm | | ogg mp3 | wav | flac | aac) (\? *)? $/, / / media file use: [{loader: 'url - loader, the options: {limit: 10240, fallback: { loader: 'file-loader', options: { name: 'media/[name].[hash:8].[ext]', publicPath: '../' } } } } ] }, { test: / \. (woff2? | eot | the vera.ttf | otf) (\? *)? $/ I / / font use: [{loader: 'url - loader, the options: {limit: 10240, fallback: {loader: 'file-loader', options: { name: 'font/[name].[hash:8].[ext]', publicPath: '../' } } } } ] } ] }, resolve: { alias: {' vue $' : 'vue/dist/vue. Esm. Js',' @ ': resolve (' SRC'),}, extensions: [' js', 'vue', 'json'],}, / / the plugin into the plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html') }), new HappyPack({ id: 'happyBabel', loaders: ['babel-loader?cacheDirectory'], threadPool: happyThreadPool }), new vueLoaderPlugin(), new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, '../public'), to: path.resolve(__dirname, '../dist') } ] }), ] }Copy the codewebpack.dev.js
const merge = require('webpack-merge') const webpack = require('webpack') const FriendlyErrorsPlugin = // Require ('friendly-errors-webpack-plugin') const devConfig = merge(webpackConfig, {mode: 'development', devtool: 'cheap-module-eval-source-map', devServer: {compress: true, host: "192.168.31.71", port: 8080, quiet:true, hot: true, inline: true, hotOnly: true, // Don't refresh page overlay when compiling fails: // proxy: {// '/ API ': // proxy: {// '/ API ': 'http://localhost:8080'}, watchOptions: {// Do not listen to files or folders, support regular match ignored: Poll: 1000}}, module: {rules: [{test: 1}}, module: {rules: [{test: 1}}, module: {rules: [{test: 1}} /\.css$/, use: ['vue-style-loader', 'css-loader', 'postcss-loader'], }, { test: /\.scss$/, use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://localhost:8080`], } }), new webpack.DefinePlugin({ 'env':JSON.stringify(process.env.NODE_ENV) }) ] }) module.exports = devConfigCopy the codewebpack.prod.js
const webpackConfig = require('./webpack.config') const merge = require('webpack-merge') const webpack = Dist = require('webpack') const path = require('path') const {CleanWebpackPlugin} = require('clean-webpack-plugin') // Dist = require('clean-webpack-plugin' Const MiniCssExtractPlugin = require("mini-css-extract-plugin") // extract CSS const HardSourceWebpackPlugin = Const optimizeCss = require('optimize- csS-assets-webpack-plugin '); function resolve(dir) { return path.join(__dirname, '.. ', dir) } const prodConfig = merge(webpackConfig, { mode: "production", devtool: 'none', optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendors: { name: 'vendors', test: /[\\\/]node_modules[\\\/]/, priority: -10, chunks: 'initial' }, common: { name: 'chunk-common', minChunks: 2, priority: -20, chunks: 'initial', reuseExistingChunk: true } } }, }, module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', } }, 'css-loader', 'postcss-loader'], }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', } }, 'css-loader', 'postcss-loader', 'sass-loader'], exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].[hash].css', chunkFilename: 'css/[name].[hash].css', }), new HardSourceWebpackPlugin(), new optimizeCss({ cssProcessor: CssProcessorOptions: {discardComments: {removeAll: true}}, canPrint: True // Whether to print plug-in information to console}), new webpack.DefinePlugin({ 'env':JSON.stringify(process.env.NODE_ENV) }) ] }) module.exports = prodConfigCopy the codezip.js
var fs = require("fs"); var archiver = require("archiver"); var path = require("path"); var output = fs.createWriteStream("./dist.zip"); var output_path = path.normalize(__dirname + '/.. /dist.zip'); var archive = archiver('zip',{ zlib:{level:9} }) archive.pipe(output); archive.directory('dist/',false); archive.finalize();Copy the code.babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true,
"useESModules": false,
"corejs": 2
}
]
]
}
Copy the code.browserslistrc
> 1%
last 2 versions
not ie <= 8
Copy the codepackage.json
{" name ":" webpack - vue ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" dev ": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js", "build:dev": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js", "build:prod": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js", "pkg": "node build/zip.js" }, "keywords": [], "author" : ""," license ":" ISC ", "devDependencies" : {" @ Babel/core ":" ^ 7.10.2 ", "@ Babel/plugin - transform - runtime" : "^ 7.10.1 @", "Babel/preset - env" : "^ 7.10.2", "@ vue/test - utils" : "^ 1.0.3", "archiver" : "^ 5.1.0", "autoprefixer" : "^ 9.8.0 Babel -", "core" : "7.0.0 - bridge. 0", "Babel - jest" : "^ 26.0.1", "Babel - loader" : "^ 8.1.0", "the clean - webpack - plugin" : "^ 3.0.0 compression will - webpack -", "plugins" : "^ 4.0.0", "copy - webpack - plugin" : "^ 6.0.2", "cross - env" : "^ 7.0.3", "CSS - loader" : "^ 3.5.3 cssnano", ""," ^ 4.1.10 ", "file - loader" : "^ 6.0.0", "friendly - errors - webpack - plugin" : "^ 1.7.0", "happypack" : "^ 5.0.1," "hard - source - webpack - plugin" : "^ 0.13.1", "HTML - webpack - plugin" : "^ 4.3.0", "jest" : "^ 26.0.1", "mini - CSS - extract - the plugin" : "^ 0.9.0", "node - sass" : "^ 4.14.1", "optimize - CSS - assets - webpack - plugin" : "^ 5.0.3 postcss -", "loader" : "^ 3.0.0", "sass - loader" : "^ 8.0.2", "sass - resources - loader" : "^ 2.0.3", "style - loader" : "^ 1.2.1", "url - loader" : "^ 4.1.0", "vue - jest" : "^ 3.0.5", "vue - loader" : "^ 15.9.2", "vue - style - loader" : "^ 4.1.2 vue - the template -", "compiler" : "^ 2.6.11", "webpack" : "^ 4.43.0", "webpack - bundle - analyzer" : "^ 3.8.0", "webpack - cli" : "^ 3.3.11 webpack - dev -", "server" : "^ 3.11.0", "webpack - merge" : "^ 4.2.2"}, "dependencies" : {" @ Babel/polyfill ": "^ 7.10.1 @", "Babel/runtime" : "^ 7.10.2", "@ Babel/runtime - corejs2" : "^ 7.10.2", "core - js" : "^ 2.6.11", "element - UI" : "^ 2.14.1", "vue" : "^ 2.6.11", "vue - the router" : "^ 3.3.2 rainfall distribution on 10-12"}}Copy the codepostcss.config.js
Module. exports = {plugins: [require('autoprefixer')]}Copy the code