配置css module的两种方法
D:\VUE项目\VSS-SSR-TECH\build\webpack.config.client.jsconst path = require('path')const HTMLPlugin = require('html-webpack-plugin')const webpack = require('webpack')const merge = require('webpack...
·
D:\VUE项目\VSS-SSR-TECH\build\webpack.config.client.js
const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractPlugin = require('extract-text-webpack-plugin')
const baseConfig = require('./webpack.config.base')
const isDev = process.env.NODE_ENV === 'development'
const defaultPlugins = [ //服务端打包不需要这些plugins
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
const devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot: true
}
let config
if (isDev) {
config = merge(baseConfig, {
devtool: '#cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.styl/,
use: [
'vue-style-loader',
{
loader:'css-loader',
options:{
module:true,
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
}
]
},
devServer,
plugins: defaultPlugins.concat([
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
])
})
} else {
config = merge(baseConfig, {
entry: {
app: path.join(__dirname, '../client/index.js'),
vendor: ['vue']
},
output: {
filename: '[name].[chunkhash:8].js'
},
module: {
rules: [
{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'vue-style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
}
]
},
plugins: defaultPlugins.concat([
new ExtractPlugin('styles.[contentHash:8].css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
])
})
}
module.exports = config
import **className** from '../assets/styles/footer.styl'
export default {
data() {
return {
author: 'Jokcy'
}
},
render() {
return (
<div id=**{className.footer}**>
<span>Written by {this.author}</span>
</div>
)
}
}
D:\VUE项目\VSS-SSR-TECH\build\vue-loader.config.js
module.exports = (isDev) => {
return {
preserveWhitespace: true,
//单独把.vue文件中css提取出来
// 不取反报错提示:extract-text-webpack-plugin loader is used without th corresponding plugin
extractCSS: !isDev,
cssModules: {
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
camelCase: true
},
//hotReload: isDev 根据环境生成
}
}
2-4添加eslint
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
npm i eslint-plugin-html -D 用于解析vue文件中的script标签内容
2-5 升级webpack4
git status
git checkout -B webpack4-first
npm uninstall webpack webpack-dev-server webpack-merge -D
npm install webpack webpack-dev-server webpack-merge webpack-cli -D
更多推荐
已为社区贡献2条内容
所有评论(0)