一、内容
- 打包到js中
- 单独打包
二、目录结构
三、打包到js中的配置,在rules中加入如下代码
{//css打包到js中
test: /\.scss/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
需要安装的loader:
npm i --save-dev style-loader
npm i --save-dev sass-loader
npm i --save-dev node-sass
四、单独打包,在rules中加入如下代码
{//css单独打包
test: /\.scss/,
use: ExtractTextPlugin.extract({
use: [{
loader:"css-loader"
},{
loader: 'sass-loader'
}],
fallback: "style-loader"
})
}
需要安装loader及插件:
npm i --save-dev style-loader
npm i --save-dev sass-loader
npm i --save-dev node-sass
npm install --save-dev extract-text-webpack-plugin //抽取css形成单独文件
五、完整配置文件webpack.base.config.js
const path = require('path');
const glob = require("glob");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //多页面配置插件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // css 单独打包插件,使用可看官方文档
const srcDir = path.resolve(__dirname, './src');
const distDir = path.resolve(__dirname, './dist');
const plugins = [];
//获取多页面的每个入口文件,用于配置中的entry
function getEntry() {
let files = glob.sync(srcDir+'/js/**/*.js'),
entry = {},
entryFileName,
outputHtmlName;
for(let i = 0; i < files.length; i++){
let matchs = /js\/(\S*).js/.exec(files[i]);
entryFileName = outputHtmlName = matchs[1]; //得到apps/question/index这样的文件名
if(/^_\w*/.test(entryFileName) || /\/_\w*/.test(entryFileName))
{
continue;
}
entryFileName = 'js/'+entryFileName;
entry[entryFileName] = files[i]
//生成html配置
plugins.push(new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: distDir+'/html/'+ outputHtmlName + '.html',
// 每个html的模版,这里多个页面使用同一个模版
template:srcDir + '/html/'+ outputHtmlName + '.html',
// 自动将引用插入body
inject: 'body',
title:outputHtmlName,
// 每个html引用的js模块,也可以在这里加上vendor等公用模块
chunks: [entryFileName]
}));
}
console.log('> entry' + JSON.stringify(entry))
return entry;
}
plugins.push(
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css').replace('css/js', 'css')
},
allChunks: true
})
);
module.exports = {
// JS 执行入口文件
entry:getEntry(),
output: {
//多文件输出
filename: '[name]_[chunkhash:8].js',// 给输出的文件名称加上 Hash 值
// 输出文件都放到 dist 目录下
path: distDir,
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader'],
},
/*{//css打包到js中
test: /\.scss/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}*/
{//css单独打包
test: /\.scss/,
use: ExtractTextPlugin.extract({
use: [{
loader:"css-loader"
},{
loader: 'sass-loader'
}],
fallback: "style-loader"
})
}
]
},
plugins:plugins,
devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};