1.读万卷书，行万里路。
2.书山有路勤为径，学海无涯苦作舟。
技术段:
相信很多刚接触前端的小伙伴，对一些自动化工具会感觉无可下手。现在前端的发展的势头，势必和后台形成一个对立面，独挡一面。
这篇文章我就写一些关于webpack的东西，学的不深，后续深入学习再更新博客。
webpack是什么？为什么要使用webpack？其实做什么事都是一样的，一个东西的出现，必有它出现的意义。
webpack功能很多，当初接触webpack是因为在开发的过程中遇到一个问题，在版本迭代的时候会存在一个缓存的问题，就是当你更新
代码的时候，因为缓存的原因，你的新代码没能及时的上线，而功能就不会及时的呈现到用户面前。刚开始还不那么严重，到后面迭代
了很多个版本，这个问题一直存在，后面就有了关于webpack的学习。
这个我就只大概说一下整个流程，流程没有错，相信你会成功的把webpack的环境给安装成功。(网上有很多教程)
1.安装node.js。第一步肯定要装node.js这是webpack必须的开发环境，直接去node.js官网下载最新版本安装就可以了。
安装完可以在终端输入命令node -v检查安装的node.js的版本。
2.安装npm。这个也是必须安装的。npm是什么？建议你要去了解一下，这里推荐你一个纯技术网站，菜鸟教程。很适合新手。
在你开发项目的主目录打开终端，在终端输入 npm install --save-de 就可以安装了。你是不是在想为什么输入这个命令就可以了啊？
其实你不必奇怪，因为你安装了node.js，这些东西node.js里面的，你只是需要把它们下载到本地使用就可以了。不必惊讶。
3.后面就是安装很多很多的插件，记住这些插件也是在node.js里面下载的，我们只需要输入命令下载就可以了。
插件一：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
插件二：npm install --save-dev style-loader css-loader
安装webpack:npm install --save-dev webpack-dev-server
在当前目录运行打包代码:npm run qzq （运行的命令）
下面是一些文件的配置：
2、package.json配置内容
{
?"name": "daka",
?"version": "1.0.0",
?"main": "index.js",
?"scripts": {
???"test": "echo \"Error: no test specified\" && exit 1",
???"bdtt": "webpack --config webpack.bdtt.config.js",
???"daka": "webpack --config webpack.daka.config.js",
???"dakaSuccess": "webpack --config webpack.dakaSuccess.config.js",
???"qzq": "webpack --config webpack.qzq.config.js"
?},
?"author": "zhang",
?"license": "ISC",
?"devDependencies": {
???"autoprefixer": "^7.1.3",
???"babel": "^6.23.0",
???"babel-core": "^6.26.0",
???"babel-loader": "^7.1.2",
???"babel-preset-es2015": "^6.24.1",
???"babel-preset-react": "^6.24.1",
???"clean-webpack-plugin": "^0.1.16",
???"css-loader": "^0.28.7",
???"extract-text-webpack-plugin": "^3.0.0",
???"file-loader": "^0.11.2",
???"html-webpack-plugin": "^2.30.1",
???"install": "^0.10.1",
???"jquery": "^3.2.1",
???"less": "^2.7.2",
???"less-loader": "^4.0.5",
???"npm": "^5.3.0",
???"postcss-loader": "^2.0.6",
???"style-loader": "^0.18.2",
???"url-loader": "^0.5.9",
???"webpack": "^3.5.5",
???"webpack-dev-server": "^2.7.1"
?},
?"description": "wxy",
?"dependencies": {
???"webpack": "^3.5.5"
?}
}
3、webpack.qzq.co3、webpack.qzq.co3、webpack.qzq.config.js内容
// 一个常见的`webpack`配置文件
const webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var CleanPlugin = require(‘clean-webpack-plugin‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require(‘autoprefixer‘);
module.exports = {
???entry: {
?????‘zmQzq‘:__dirname + "/require/qzq/zm_qzq.js",
?????‘zmMine‘:__dirname + "/require/qzq/zm_mine.js",
???},
???output: {
???????path: __dirname + "/build/qzq",
???????filename: "[name].js"
???},
???devtool: ‘none‘,
???devServer: {
???????contentBase: "./",//本地服务器所加载的页面所在的目录
???????historyApiFallback: true,//不跳转
???????inline: true,
???????hot: true
???},
???module: {
???????rules: [
???????????{
???????????????test: /(\.jsx|\.js)$/,
???????????????use: {
???????????????????loader: "babel-loader"
???????????????},
???????????????exclude: /node_modules/
???????????},
???????????{
???????????????test: /\.css$/,
???????????????use: ExtractTextPlugin.extract({
?????????????????fallback: "style-loader",
?????????????????use: "css-loader"
???????????????})
???????????},
???????????{
???????????????test:/.(png)|(jpg)$/,
???????????????loader: "url-loader?limit=8192"
???????????}
???????]
???},
???plugins: [
???new CleanPlugin([‘build‘], {
?????root: ‘/Users/huizhang/web-git/apps/newproject/build/qzq‘,
// ???root: ‘D:/web/apps/newproject/build‘,
?????verbose: true,
?????dry: false //false表示删除
????/* 排除 exclude: [‘shared.js‘]*/
???}), //清空目录
???new ExtractTextPlugin("[name].css"),
???new HtmlWebpackPlugin({
?????filename: __dirname + ‘/resource/zm_insurance/zm_list.html‘, //这个路径要相对于output.path输出的JS设置 在JS的上一级就用 ../../
?????chunks: [‘zmQzq‘], //限定这个模板只引入index 和公用部分JS common.js
?????hash: true, // 为静态资源生成hash值 在引入资源地址后加上?hash值 ?实现不修改文件名加版本号功能
?????xhtml: true, ?// 需要符合xhtml的标准
?????inject: ‘body‘,
?????template: ?__dirname + ‘/resource/zm_insurance/zm_list.ejs‘ //模板地址
???}),
?????new HtmlWebpackPlugin({
?????filename: __dirname + ‘/resource/zm_insurance/zm_mine.html‘, //这个路径要相对于output.path输出的JS设置 在JS的上一级就用 ../../
?????chunks: [‘zmMine‘], //限定这个模板只引入index 和公用部分JS common.js
?????hash: true, // 为静态资源生成hash值 在引入资源地址后加上?hash值 ?实现不修改文件名加版本号功能
?????xhtml: true, ?// 需要符合xhtml的标准
?????inject: ‘body‘,
?????template: ?__dirname + ‘/resource/zm_insurance/zm_mine.ejs‘ //模板地址
???})
???]
};
webpack自动化构建你的项目
原文地址：http://www.cnblogs.com/wush-1215/p/7883252.html