【webpack】packge.json 、 webpack.config.js

【package.json】

{
  "name": "symbio",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack",
    "webpack-w": "webpack --w",
    "webpack-dev": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "css-loader": "^0.28.0",
    "ejs-loader": "^0.3.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2",
    "webpack-utf8-bom": "^1.0.3"
  },
  "jshintConfig": {
    "undef": true,
    "predef": ["require", "module", "window", "document", "HTMLElement"]
  }
}

【webpack.config.js】

//cnpm i webpack -g
//cnpm i webpack-dev-server -g
//cnpm i webpack html-webpack-plugin html-loader style-loader css-loader autoprefixer postcss-loader sass-loader node-sass ejs-loader url-loader file-loader webpack-utf8-bom webpack-dev-server --save-dev
var debug = true;

var htmlWebpackPlugin = require('html-webpack-plugin'),
    webpack = require('webpack');
var minify = { //压缩html
    removeComments: true,
    collapseWhitespace: true
};



module.exports = {
    entry: {
        company: './src/page/company/js/index.js',
        news: './src/page/news/js/index.js',
        article: './src/page/article/js/index.js',
        job_index: './src/page/job/js/index.js',
        job_content: './src/page/job/js/content.js'
    },

    output: {
        path: __dirname,
        filename: 'dist/js/[name].js' + (!debug ? '?[chunkhash]' : ''),
        // publicPath: '/symbio'
    },

    plugins: [
        new htmlWebpackPlugin({
            template: './src/page/company/index.html',
            filename: 'dist/page/company/index.html',
            chunks: ['company'],
            inject: 'head',
            minify: debug ? {} : minify
        }),
        new htmlWebpackPlugin({
            template: './src/page/news/index.html',
            filename: 'dist/page/news/index.html',
            chunks: ['news'],
            inject: 'head',
            minify: debug ? {} : minify
        }),
        new htmlWebpackPlugin({
            template: './src/page/article/index.html',
            filename: 'dist/page/article/index.html',
            chunks: ['article'],
            inject: 'head',
            minify: debug ? {} : minify
        }),
        new htmlWebpackPlugin({
            template: './src/page/job/index.html',
            filename: 'dist/page/job/index.html',
            chunks: ['job_index'],
            inject: 'head',
            minify: debug ? {} : minify
        }),
        new htmlWebpackPlugin({
            template: './src/page/job/content.html',
            filename: 'dist/page/job/content.html',
            chunks: ['job_content'],
            inject: 'head',
            minify: debug ? {} : minify
        })
    ]
};
module.exports.module = {};
module.exports.module.rules = [];



//style
module.exports.module.rules.push({
    test: /\.scss$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader' + (debug ? '?sourceMap' : '')
    }, {
        loader: 'postcss-loader',
        options: {
            plugins: [
                require('autoprefixer')({
                    browsers: ['ios >= 7']
                })
            ]
        }
    }, {
        loader: 'sass-loader'
    }]
});



//url-loader
module.exports.module.rules.push({
    test: /\.(woff|ttf|gif|png|jpg|jpeg)(\?.*)*$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192,
            name: '/dist/img/[name].[ext]?[hash:8]'
        }
    }]
});



//ejs-loader
module.exports.module.rules.push({
    test: /\.tpl$/,
    use: 'ejs-loader'
});



//解决cshtml中文乱码的问题
module.exports.plugins.push(
    new(require('webpack-utf8-bom'))(true, /\.cshtml$/)
);



//压缩js
if (!debug) {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    );
}



//devtool
module.exports.devtool = (debug ? 'eval' : 'source-map');



//devServer
if (debug) {
    module.exports.devServer = {
        contentBase: './'
    };
}