这两天摆弄webpack，躺过很多坑，直到今天看了一位博主的文章才得以解决。他对配置中的各个部分做说明。
下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html
报错信息有一大串，其中提及python和gyp，其实不用去安装他们。只要执行下面的命令：
npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm i node-sass -D
项目根目录：
package.json
postcss.config.js
.babelrc
项目根目录=>build文件夹
const webpack = require(‘webpack‘)const { resolve }= require(‘path‘)const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘)const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)const isDev = process.env.NODE_ENV === ‘production‘let pluginsConfig = [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ title: ‘my App‘, template: resolve(__dirname, ‘../src/index.html‘) }), new webpack.DefinePlugin({ ‘process.env‘: { ‘NODE_ENV‘: JSON.stringify(process.env.NODE_ENV) } })]if (!isDev) { pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({ filename: "css/[name]_[contenthash].css" }))}module.exports = { mode: process.env.NODE_ENV || ‘production‘, entry: resolve(__dirname, ‘../src/index.js‘), output: { filename: ‘bundle.js‘, path: resolve(__dirname, ‘../dist‘) }, resolve: { //引入时可以省略后缀 extensions: [‘.js‘, ‘.vue‘, ‘.json‘], alias: { ‘vue$‘: ‘vue/dist/vue.esm.js‘, //@就了代表了src文件夹所在路径 ‘@‘: resolve(‘src‘), } }, module: { rules: [{ test: /\.vue$/, loader: ‘vue-loader‘ }, { test: /\.scss$/, use: [ isDev ? ‘vue-style-loader‘ : MiniCssExtractPlugin.loader, { loader: ‘css-loader‘, options: { modules: true, localIdentName: ‘[local]_[hash:base64:8]‘ } }, ‘sass-loader‘ ] }, { test: /\.(png|jpg|gif)$/, loader: ‘url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000‘ }, { test: /\.js$/, loader: ‘babel-loader?cacheDirectory‘, exclude: ‘/node_modules/‘, include: resolve(__dirname, ‘../src‘) } ] }, plugins: pluginsConfig,}
webpack.base.confg.js
const webpack = require(‘webpack‘)const path = require(‘path‘)const WebPackBaseConfig = require(‘./webpack.base.conf.js‘)const CleanWebpackPlugin = require(‘clean-webpack-plugin‘)const WebPackMerge = require(‘webpack-merge‘)module.exports = WebPackMerge(WebPackBaseConfig, { devtool: ‘inline-source-map‘, devServer: { contentBase: path.join(__dirname, ‘dist‘), //告诉服务器从哪个目录中提供内容 compress: true, //启用 gzip 压缩 port: 9000, //端口号 host: ‘0.0.0.0‘, //默认是 localhost。如果希望服务器外部可访问,则设置为0.0.0.0 hot: true //启用热替换模块 必须配置 webpack.HotModuleReplacementPlugin }, plugins: [ new CleanWebpackPlugin([‘dist‘]), //清理文件夹 new webpack.HotModuleReplacementPlugin(), //启用热替换模块 new webpack.NamedModulesPlugin() //启用HMR时,插件将显示模块的相对路径 ]})
webpack.dev.conf.js
const webpack = require(‘webpack‘)const path = require(‘path‘)const WebPackMerge = require(‘webpack-merge‘)const WebPackBaseConfig = require(‘./webpack.base.conf.js‘)const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘)const glob = require(‘glob-all‘)const PurifyCSSPlugin = require(‘purifycss-webpack‘)module.exports = WebPackMerge(WebPackBaseConfig, { output: { filename: ‘[name].js‘, chunkFilename: ‘[name].[chunkhash:5].js‘, path: path.resolve(__dirname, ‘dist‘) }, optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: ‘vendors‘, chunks: ‘all‘ } } }, runtimeChunk: true, minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true }), new OptimizeCSSAssetsPlugin() ] }, plugins: [ new PurifyCSSPlugin({ paths: glob.sync([ path.join(__dirname, ‘../src/‘) ]), purifyOptions: { whitelist: [‘*purify*‘] } }), ]})
webpack.prod.conf.js
项目根目录=>src文件夹
import Vue from ‘vue‘import router from ‘./router/index.js‘new Vue({ el: ‘#app‘, router})
index.js
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset=‘utf-8‘> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <title></title></head><body> <div id="app" v-cloak> <router-view></router-view> </div></body></html>
index.html
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div></template><script>export default { name: ‘App‘}</script><style>#app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
App.vue
项目根目录=>src文件夹=>router文件夹
import Vue from ‘vue‘import Router from ‘vue-router‘import HelloWorld from ‘@/components/HelloWorld‘Vue.use(Router)export default new Router({routes: [{path: ‘/‘,name: ‘HelloWorld‘,component: HelloWorld}]})
index.js
项目根目录=>src文件夹=>components文件夹
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" > Forum </a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" > Community Chat </a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" > Twitter </a> </li> <br> <li> <a href="http://vuejs-templates.github.io/webpack/" target="_blank" > Docs for This Template </a> </li> </ul> <h2>Ecosystem</h2> <ul> <li> <a href="http://router.vuejs.org/" target="_blank" > vue-router </a> </li> <li> <a href="http://vuex.vuejs.org/" target="_blank" > vuex </a> </li> <li> <a href="http://vue-loader.vuejs.org/" target="_blank" > vue-loader </a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> </div></template><script>export default { name: ‘HelloWorld‘, data () { return { msg: ‘Welcome to Your Vue.js App‘ } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped, lang="sass" src=‘@/assets/css/admin.scss‘></style>HelloWorld.vue 项目根目录=>src文件夹=>assets文件夹=>css
h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}$link-color: #ff6000;a { color: $link_color;}
admin.scss
