var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
'index':'./app/index.js',
'css':'./app/index.less'
},
resolve:{
extensions:['.js'],
alias: {
//設置全局jquery插件;
jquery: path.resolve(__dirname,'./bower_components/jquery/dist/jquery.js') //絕對路徑;
},
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(png|jpg|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?[\s\S]+)?$/,
use: "file-loader?name=[name][hash].[ext]&outputPath=images/"
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'less-loader']
})
}
]} ,
plugins: [
new ExtractTextPlugin({
filename:"styles.css",
allChunks:true }),
new HtmlWebpackPlugin({
title:'hello',
filename: 'test.html',
template: 'app/index.html' }),
new webpack.optimize.CommonsChunkPlugin({
name: ['index'] }),
new UglifyJSPlugin(),
new webpack.ProvidePlugin({
$: 'jquery' }), //文件里遇見‘$’加載jquery
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //正則匹配后綴.css文件;
cssProcessor: require('cssnano'), //加載‘cssnano’css優化插件;
cssProcessorOptions: { discardComments: {removeAll: true } }, //插件設置,刪除所有注釋;
canPrint: true //設置是否可以向控制臺打日志,默認為true;
} ) ],
devServer: {
stats: 'errors-only',
contentBase:'./',
disableDotRule:true
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename:'js/[name].js'
}
};
webpack-config
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
推薦閱讀更多精彩內容
- webpack是前端資源模塊化管理和打包工具,在某種程度上來說,是專門為前端開發量身打造的。在webpack出現之...
- 1.下載vue-cli vue-cli的使用與詳細介紹,可以到github上獲取https://github.co...