本菜鸟搭建的入门级别的webpack环境， 仅供参考，webpack学精很不容易，每个插件作者都有自己的思想。 待我吃透了再说。 待我后续完善， 目前可以

• 提取图片
• 服务器环境 支持跨域 热更新
• ES6语法降级
• less 转 es6

//压缩js插件
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
//
var webpack = require('webpack');
//提取公共代码
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//在使用时将不再需要import和require进行引入， ProvidePlugin进行实例初始化后，jquery就会被自动加载并导入对应的node模块中
var providePlugin = new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' });
module.exports = {entry: { //多入口index: './src/js/index.js',goodsInfo: './src/js/goodsInfo.js'},output: {//多出口filename: '[name].js',path: __dirname + '/out',publicPath: 'http://localhost:8080/out'},module: {rules: [{ test: /.js$/, use: ['babel-loader'] }, //js语法降级// { test: /.css$/, use: ['style-loader', 'css-loader'] }, //css{test: /.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{ test: /.jpg|png|gif|svg$/, use: ['url-loader?limit=8192&name=./[name].[ext]'] },//设置尺寸名字和扩展名{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }]},plugins: [new UglifyJSPlugin(),new webpack.optimize.CommonsChunkPlugin({name: "commons",filename: "commons.js",minChunks: 2}),new ExtractTextPlugin("[name].css"),providePlugin],devServer: {quiet: false, //控制台中不输出打包的信息open: true, //打开浏览器noInfo: false,hot: true, //开启热点inline: true, //开启页面自动刷新lazy: false, //不启动懒加载progress: true, //显示打包的进度watchOptions: {aggregateTimeout: 300},port: '8088', //设置端口号proxy: { //跨域'/api': {target: 'http://localhost:80', //目标服务器ws: true, //开启websocketchangeOrigin: true, //开启代理pathRewrite: {'^/api': '/api' // 会请求到 http://localhost:80/api}}}}
}
复制代码

package.json文件

{"name": "webpack1","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","duyi": "webpack-dev-server --devtool eval-source-map --progress --colors"},"author": "","license": "ISC","dependencies": {"babel": "^6.23.0","babel-core": "^6.26.0","babel-loader": "^7.1.3","css-loader": "^0.28.10","file-loader": "^1.1.9","style-loader": "^0.20.2","uglifyjs-webpack-plugin": "^1.2.2","url-loader": "^0.6.2","webpack": "^3.5.5"},"devDependencies": {"extract-text-webpack-plugin": "^3.0.2","jquery": "^3.3.1","less": "^3.0.1","less-loader": "^4.0.6"}
}复制代码