关于Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

一份基本的Webpack配置文件


const HtmlWebpackPlugin = require("html-webpack-plugin"); //模版生成文件
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BabiliPlugin = require('babili-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

var HappyPack = require('happypack');


const PATHS = {
	app: path.join(__dirname,"app"),
	dist: path.join(__dirname,"dist")
}

const plugin = new ExtractTextPlugin({
	filename: 'css/[name].optimize.css',
	ignoreOrder: true
})

module.exports = {
    devServer: {
        host: process.env.HOST, // Defaults to `localhost`
        port: 80, // Defaults to 8080
        overlay: {
            errors: true,
            warnings: true,
        },
    }, //网页显示错误 端口设置
	entry: {
		app: PATHS.app+"/js",
	},
	output :{
		path: PATHS.dist,
		filename: "js/[name].js"
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "webpack demo",
			tmplete: "app/view/templete.html"
		}),
        plugin,
        new BabiliPlugin(), //js压缩
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        }), //css压缩
        new HappyPack({
            loaders: [ 'babel-loader?presets[]=es2015' ],
        })
	],
	module:{
		rules:[
			{
                test: /\.js$/,
                loader:'happypack/loader',
                 include: path.join(__dirname, "/app/js"),
                 exclude: path.join(__dirname, "/node_modules"), //加快编译速度
			},
			{
				test:/\.css$/,
                include: path.join(__dirname, "/app/css"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
				use: plugin.extract({
                    fallback: "style-loader", //在这里指定styleLoader 不要在use中
                    use: [{
                        loader: 'css-loader',
                        query:{
                            importLoaders : 1,
                            moudle:true
                        }
                    },'postcss-loader'],
				})
			},
            {
                test: /\.less$/,
                include: path.join(__dirname, "/app/css"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
                use: plugin.extract({
                    fallback: "style-loader", //在这里指定styleLoader 不要在use中
                    use: [{
                        loader: "css-loader" // translates CSS into CommonJS
                    }, 'postcss-loader',{
                        loader: "less-loader" // compiles Less to CSS
                    }]
                })
            },
            {
                test:/\.(png|jpg|jpeg|gif|svg)$/,
                include: path.join(__dirname, "/app/img"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
                use: 'url-loader?limit=8192&name=../images/[name].[ext]?[hash]'
            }
		]
	},
}

以上的配置是根据我自己的喜好和需求来进行的，并且我创建的两份，一份是上面的完整版，另一分删除了文件压缩功能，以求更方便的代码调试和快速的打包过程。

功能

我以我的这份配置来简单讲述一下webpack的功能

入口

webpack既然是一个打包工具，就需要一个入口，从这个入口顺藤摸瓜，找到所有用到的资源。可以配置多个入口

entry: {
    app: PATHS.app+"/js",
},

输出

output :{
        path: PATHS.dist,
        filename: "js/[name].js"
},

在设置了path之后，之后所有导出的东西都将会以这个为基础目录。如果要设置下输出路径，需要在具体loader的filename设置

loader

loader是Webpack中一个核心的概念，我对它的理解就是给不同类型的文件做不同的处理，那么处理的工具就是Loader, 比如babel-loader就可以用来处理es6, less-loader可以处理less。

plugin

插件赋予了webpack更多更强大的功能，例如代码压缩，性能优化，自动生成HTML文件。

以上就是webpack配置文件的基本组成

常用启动参数

这方面我利用了npm的package.json来快速启动。简述下基本用途


 "scripts": {
    "test": "echo \"Error: no test specified\", && exit 1",
    "build": "webpack --env production --config webpack.config.pro.js",
    "start": "webpack-dev-server --env development  --config webpack.config.dev.js",
    "status": "webpack --env production --config webpack.config.dev.js --profile --json > stats.json"
  },

build 用于文件的最终打包，生产环境，webpack.config.pro.js中有完整的打包，类似代码的压缩
start 用于工程的调试，开发环境，尽量以方便调试和快速打包为目的，利用WDS实现修改文件热刷新
status 用于生成打包json文件，可以用来进行可视化分析

install package


"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babili-webpack-plugin": "^0.1.2",
    "css-loader": "^0.28.4",
    "eslint-loader": "^1.9.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "happypack": "^4.0.0-beta.1",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "optimize-css-assets-webpack-plugin": "^3.0.0",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }

功能及用到的package

具体的用法可以参考官方文档或者我的config，

dev下自动热刷新 webpack-dev-server
less处理 less-loader
es6编译打包 babel-loader
样式文件处理（经lessloader编译后） style-loader 和 css-loader
css压缩 optimize-css-assets-webpack-plugin
将嵌入到js中的文件剥离为独立的css文件 extract-text-webpack-plugin
打包多线程优化 happypack
自动生成HTML文件并自动引入资源 html-webpack-plugin
css自动加兼容性前缀 postcss-loader
图片处理小图>base64 大图src url-loader file-loader

多页面可以再入口中设置多个入口

一些比较高级的用法

模块热加载

多页面配置

利用模版语法让生成的HTML变得更加只能，比如访问当前页面的name并导入不同的script css

总结

Webpack与gulp相比能做的事情有些类似，但是webpack毫无疑问是更加贴近实际的需求的，gulp机械感会更强一些。而webpack它更像是一个从前端流程角度去思考问题解决问题的工具。

DEMO地址 https://github.com/zhangzhengyi12/WebpackDemo

我的Webpack实战

TOC