webpack配置

前言

　　我以前使用的自动化构建工具是gulp，感觉还是挺好用的，然后在学习js开发模块化时，先是入了seajs这个坑，seajs在早些年就已经没有再维护了，而且使用起来很不友好，所以就找到了2016的新贵webpack，囊括了前端自动化和模块化打包的功能，不过学习webpack也是有不少坑的，在网上学习了挺多所谓的快速入门后，发现缺点是都很零散，没有一个很好的webpack配置例子，然后机缘巧合下再yeoman下发现了react-webpack一个自动生成的项目，这是针对reactjs使用的webpack配置，但也可以作为简单的前端自动化配置参考。
　　我的demo在文末，谢谢
　　原react-webpackgithub地址：react-webpack
　　下图是react-webpack的官方目录结构
　
　　而下图是我参考后简化的目录结构 简化的react-webpack目录结构
　　
　　

webpack配置

step1:配置webpack.config.js

　　我们先创建webpack.config.js文件，即我们的基本配置文件，通常的情况下我们会把所有的配置项都写在这里面，但这里我们会把配置项拆分，把详细的配置项都放到了cfg文件夹中，并且分开开发环境和生产环境使用。
　　首先我们需要读取开发环境或者生产环境的参数，我这里使用了minimist模块来读取命令行的参数

    //此处会把命令行的的参数都出来    const args = require("minimist")(process.argv.slice(2));

　　如我们最终运行时输入命令行webpack-dev-server --env=dev --progress --colors --hot --inline
　　args会读取到的内容如下，那我们就可以根据env的不同值进行不同的操作。

    { _: [],  env: 'dev',  progress: true,  colors: true,  hot: true,  inline: true }

　　最终基本的webpack.config.js的配置如下：

    "use strict";    const path = require("path");    const args = require("minimist")(process.argv.slice(2));    let config = require(path.join(__dirname, 'cfg/' + args.env));    module.exports = config;

Step2配置cfg文件中的配置文件

• 先配置defaults.js文件，这里很简单，就直接给出，又需要的可以增加loader

"use strict";const path = require('path');const srcPath = path.join(__dirname, '/../src');const port = 8000;//浏览器打开端口function getDefaultModules() {    return {        loaders: [{            test: /\.js/,            loader: "babel-loader",            include: srcPath,        },            {                test: /\.css/,                loader: "style-loader!css-loader",                include: srcPath            }]    }}module.exports = {    srcPath: srcPath,    publicPath: "/assets/",    port: port,    getDefaultModules: getDefaultModules};

• 配置base.js文件，需要引进defaults.js，这里主要是配置webpack-dev-server的参数和出口文件

'use strict';let path = require("path");let defaultSettings = require("./defaults");module.exports = {    port: defaultSettings.port,    output: {        path: path.join(__dirname, '../dist/assets'),        filename: 'app.js',        publicPath: defaultSettings.publicPath    },    devServer: {        contentBase: './src/',        hot: true,        port: defaultSettings.port,        inline: true,        process: true,        colors: true    },    resolve: {        extensions: ['', '.js', '.jsx'],    },    module: {}};

• 接着是主要引入的dev.js文件，需要引入base.js和defaults.js，这里主要配置入口文件，把原来再webpack.config.js中应该配置的信息在这里进行整合，添加webpack处理插件等

"use strict";let webpack = require("webpack");let baseConfig = require('./base');let defaultSettings = require('./defaults');let config = Object.assign({}, baseConfig, {   entry: [       //注释部分是使用配置文件配置webpack-dev-server参数，我这里使用的是命令行传参数       // 'webpack-hot-middleware/client?http://127.0.0.1:' + defaultSettings.port,       // 'webpack/hot/only-dev-server',       './src/index'   ],    cache: false,    devtool: 'eval-source-map',    plugins: [        new webpack.HotModuleReplacementPlugin(),        new webpack.NoErrorsPlugin(),    ],    module: defaultSettings.getDefaultModules()});module.exports = config;

• 而src里的文件很简单

<!--/src/index.html--><p id="page">123456</p><script type="text/javascript" src="./assets/app.js"></script>

/*/src/style.css*/body{     background: gainsboro;     font-size: 50px;}

// /src/index.jsrequire("./style.css");document.getElementById('page').innerHTML = "Hello world!";

Step3 运行文件

　　运行命令行webpack-dev-server --env=dev --progress --colors --hot --inline
　　浏览器打开localhost:8000即可查看，并且更改style.css和index.js文件可以看到浏览器即时刷新，至此我们的配置就基本完成了

Step4 打包

　　打包的话我们需要在cfg文件中新建dist.js文件，而运行时我们的命令行变为webpack --env=dist，然后我们就会根据env参数加载dist.js而不是上面的dev.js
　　主要配置其实和dev.js是大同小异的，只是使用的命令不同，所以一个会在服务端打开，一个会把文件打包，代码如下：

"use strict";let path = require("path");let webpack = require("webpack");let baseConfig = require('./base');let defaultSettings = require('./defaults');let config = Object.assign({}, baseConfig, {   entry: path.join(__dirname, '../src/index'),    plugins: [        new webpack.DefinePlugin({            'process.env.NODE_ENV': '"production"'        }),        new webpack.HotModuleReplacementPlugin(),        new webpack.NoErrorsPlugin(),        new webpack.optimize.UglifyJsPlugin(),    //压缩        new webpack.optimize.OccurenceOrderPlugin(),  //根据模块引用频率，来调整模块顺序，定义模块id，引用频率越高，id越短，增加加载速度        new webpack.optimize.AggressiveMergingPlugin(), //优化代码，合并相似部分，提取公共部分        new webpack.optimize.DedupePlugin(),  //检测相似文件，合并时去除冗余    ],    module: defaultSettings.getDefaultModules()});module.exports = config;

　　这是运行命令行webpack --env=dist将会在根目录下得到/dist/assets/app.js/文件，这是打包好的文件，要运行的话需要手动拷贝index.html到/dist/文件中

Step5 使自动化流程更简洁

　现在的问题是：
* 使用服务端时，需要手动打开浏览器，输入地址
* 打包时需要复制index.html文件
* 命令行太长，不好记

解决问题1：
安装open模块，在webpack.config.js中加入下列代码：

//...const open = require("open");   //打开浏览器open('http://localhost:' + config.port + '/webpack-dev-server/');

这里url路径加上/webpack-dev-server/会在顶部看到应用状态

解决问题2和3：
安装copy和copyfiles模块，在package.json中加入以下代码：

"scripts": {    "start": "webpack-dev-server --env=dev --progress --colors --hot --inline",    "dist": "webpack --env=dist & npm run copy",    "copy": "copyfiles -f ./src/index.html ./dist"  },

之后就可以使用npm start实时开发
　　　　　　　　npm run dist进行打包

最后demo放在webpack-simple-config demo