const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode:'production',
entry:{
main:'./src/main.js'
},
output:{
// 输入的根目录
path: __dirname + '/dist',
filename:'[hash].js'
},
module: {
rules: [
{
//css 自动加前缀还要配合postcss配置
test: /\.css$/,
use: [ {
loader:"style-loader",
// options: {
// autoprefixer: false
// }
},
{
loader:"css-loader",
options: {
autoprefixer: true
}
}],
},
{
test: /\.scss$/,
// use: ['style-loader','css-loader','sass-loader'],
loader:ExtractTextWebpackPlugin.extract(['css-loader','postcss-loader','sass-loader'])
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 13000,
// name 表示输出的地方,相对于输出根目录
name: 'img/[name].[hash:7].[ext]',
publicPath:'../' //在生成的文件引用,前面加
}
},
{
test: /\.html$/,
loader: "html-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// inject: 引入模块的注入位置;取值有true/false/body/head
minify:true
}),
new CopyWebpackPlugin([
{from:'./src/vendor',to:'./js'}
]),
// css 样式分离不能HMR
new ExtractTextWebpackPlugin("css/[name].[hash:7].css")
]
}