webpack 轻量级打包配置


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") ] }
posted @ 2018-06-01 09:43  JonasYu  阅读(315)  评论(0编辑  收藏  举报