const path = require('path') const webpack = require('webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin') var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { 'index': './assets/js/index.es6' }, output: { // path:指定編譯的路徑 path: path.join(__dirname, './assets/'), // publicPath:給每一個編譯好的文件,在html中前面加上一樣的路徑 publicPath: './', filename: 'js/[name].bundle.js' }, module: { rules: [{ test: /\.es6$/, use: [{ loader: 'babel-loader', options: { presets: [ ['env', { //關閉babel編譯es6,打開treeShaking modules: false }], ] } }] }, { test: /\.less$/i, use: ExtractTextPlugin.extract({ // fallback 全部的loader都失敗了,才調用這個 fallback: 'style-loader', use: [{ loader: 'css-loader' }, { loader: 'less-loader' }] }) }] }, // 放到cdn,就不須要打包進項目了 external:{ jquery:'window.$' }, plugins: [ new ExtractTextPlugin("css/[name].css"), //提取出公用代碼 new webpack.optimize.CommonsChunkPlugin({ name: 'common', minChunks: 2, filename: 'js/[name].js' }), // 自動把靜態文件插入html new htmlWebpackPlugin({ filename: 'index.html', template: './index.html', inject: true }), // treeShaking 開啓壓縮,自動去除沒用到不須要的代碼 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true }, output: { comments: false }, sourceMap: false }), // 把沒用的function幹掉了,代碼看起來更好看 new webpack.optimize.ModuleConcatenationPlugin() ] }