一个简易的webpack开发环境

本菜鸟搭建的入门级别的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, //开启websocket
                changeOrigin: 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"
  }
}