一個簡易的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"
  }
}

複製代碼