webpack 配置

该配置文件可以解决以下棘手问题：

---

js

1、配置两个以上入口文件
2、提取常用公共模块为单独的js文件(vendor--webpack.optimize.CommonsChunkPlugin)
3、解决引用第三方文件的依赖问题（imports-loader/script-loader）
4、jQuery以及依赖jQuery的js文件引用出错问题（webpack.ProvidePlugin）

---

css

1、如何引入css
2、把css弄成单独文件提取出来--(ExtractTextPlugin)
3、给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