webpack 配置

該配置文件能夠解決如下棘手問題：

---

js

一、配置兩個以上入口文件
二、提取經常使用公共模塊爲單獨的js文件(vendor--webpack.optimize.CommonsChunkPlugin)
三、解決引用第三方文件的依賴問題（imports-loader/script-loader）
四、jQuery以及依賴jQuery的js文件引用出錯問題（webpack.ProvidePlugin）

---

css

一、如何引入css
二、把css弄成單獨文件提取出來--(ExtractTextPlugin)
三、給css自動加前綴：-webkit-等，已兼容更多瀏覽器(autoprefixer)

---

話很少說，看配置文件：此外改配置文件還加入的es6語法兼容，以及less文件編譯處理

webpack.config.js

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var node_dir = __dirname + '/node_modules';
module.exports = {
    devtool: 'inline-source-map',
    entry: {
        entry1: './static/js/app.js',
        // entry2:'./static/js/app.js',
        vendor: ["jquery", "swiper.jquery"]
    },
    output: {
        path: path.resolve("./dist"),
        filename: '[name]_bundle.js',
        publicPath: '/'
    },
    postcss: [autoprefixer],
    plugins: [
        new webpack.ProvidePlugin({
           $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        }),
        new webpack.DefinePlugin({
            DEBUG: process.env.NODE_ENV !== 'production'
        }),
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'templates/pages/index.html')
        })
    ],
    resolve: {
        alias: {
            'swiper.jquery':node_dir+"/swiper/dist/js/swiper.jquery.min.js",
            'swiper.animate': node_dir+'/swiper/dist/js/swiper.animate1.0.2.min.js'
        }
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        "es2015",
                    ]
                }
            }, {
                test: /\.less$/,
                loader: 'style!css!postcss!less'
            }, {
                test: /\.css/,
                loader: ExtractTextPlugin.extract('style', 'css', 'postcss')
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=25000'
            }
        ]
    }
};

---

package.json

{
  "name": "zizaihome-homepage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline --progress --colors --port 8080",
    "build": "NODE_ENV=production webpack --watch"
  },
  "keywords": [],
  "author": "lizzy",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.1",
    "swiper": "^3.4.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "babel": "^6.5.2",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.24.1",
    "imports-loader": "^0.7.0",
    "less": "^2.5.3",
    "less-loader": "^2.2.1",
    "postcss-loader": "^1.2.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "uglify-loader": "^1.2.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.12.1"
  }
}

具體舉例，請見：https://github.com/Lizzy07/Re...
npm install
npm run start
localhost:8080