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() ] }