这两天摆弄webpack，躺过很多坑，直到今天看了一位博主的文章才得以解决。他对配置中的各个部分做说明。
下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html
安装package.json中的node-sass可能因为网络原因不能成功安装
报错信息有一大串，其中提及python和gyp，其实不用去安装他们。只要执行下面的命令：
npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm i node-sass -D
以下为一个vue项目的基本配置：
项目根目录：
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
原文地址：https://www.cnblogs.com/qiu-freedom/p/10328452.html
时间： 2024-10-10 19:26:20