module.exports = {
  entry: {
    index: "index.js",
  },
};

//app.js
// es module
import { sum } from "./sum";

// commonjs module

var minus = require("./minus");

// amd module
require(["./mult"], function (mult) {
  console.log("mult(1,2) :", mult(1, 2));
});

console.log("sum(1,2) = ", sum(1, 2));
console.log("minus(1,2) = ", minus(1, 2));

//mult.js

/*

这个module会异步打包，所以会生成

Hash: 0c96debc99a615f79024
Version: webpack 3.10.0
Time: 67ms
      Asset       Size  Chunks             Chunk Names
0.bundle.js  429 bytes       0  [emitted]
  bundle.js    6.75 kB       1  [emitted]  main
   [0] ./app.js 264 bytes {1} [built]
   [1] ./sum.js 46 bytes {1} [built]
   [2] ./minus.js 57 bytes {1} [built]
   [3] ./mult.js 112 bytes {0} [built]
   
两个bundle.js
*/

define(function (require, factory) {
  "use strict";
  return function (a, b) {
    return a * b;
  };
});

<!--不需要最新的-->
npm install babel-loader babel-core --save-dev

npm install babel-preset-env --save-dev

# install
npm install babel-polyfill --save

#usage
import 'babel-polyfill'

# install
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save-dev

#usage

根目录新建一个.babelrc文件，babel相关配置文件都可以放在那个地方

npm i typescript ts-loader --save-dev
# or 下面是社区的解决方案，使用了缓存，所以更快
npm i typescript awesome-typescript-loader --save-dev

1. 方法一

require.ensure方法，接受四个参数：
- []：依赖
- callback
- errorCallback
- chunkName

require.include方法

2. 通过es6规范定义的 loader spec

System.import() -> import()

import()返回一个promise

> webpack import function :动态加载

import(
	/*
	在注释中定义chunkName等,webpack新增功能‘magic comments’
	webpackChunkName:'subpage'
	*/
	moduleName
).then(cb)

import base from "../css/base.css";

base.use();
使用该样式;
base.unuse();
不使用该样式;

module.exports = function (css) {
  console.log(window.innerWidth);
  return css.replace("red", "green");
};

npm install less node-sass less-loader sass-loader --save-dev

npm i extract-text-webpack-plugin webpack --save-dev

var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");

plugins: [
  new ExtractTextWebpackPlugin({
    filename: "[name].min.css",
    allChunks: false, //控制动态加载（import）的css是否统一打包在一起，还是打包在各自的bundle.js中，默认为false，分开打包
  }),
];

npm i postcss postcss-loader autoprefixer cssnano postcss-cssnext --save-dev

a {
  ddisplay: flex;
}

# 转化为 a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

{
...
"browserslist":[
	">= 1%",
	"last 2 versions"
]
}

# loadsh tree shaking 不生效的解决办法
lodash 和 lodash-es, 不支持tree shaking，可以借助 babel-plugin-lodash

npm i babel-plugin-lodash --save-dev

webpack.config.js

{
	test: /\.js$/,
	use: [
		{
			loader:'babel-loader',
			options:{
				presets:['env'],
				plugins:['lodash']
			}
		}
	]
}

npm i purifycss-webpack glob-all --save-dev

plugins:[
	{
		paths: glob.sync([
			path.join(__dirname, './*.html'),
			path.join(__dirname, './src/*.js')
		])
	}
]

npm i file-loader url-loader img-loader postcss-sprites

modules: [{
	test: /\.(png|jpg|jpeg|gif)$/,
	use: [
		{
			loader: 'file-loader',
			options:{
				publicPath: '',
				outputPath: 'dist/',
				useRelativePath: true
			}
		}
		{
			loader: 'url-loader',
			options: {
				limit:5000,  # 5k							publicPath: '',
				outputPath: 'dist/',
				useRelativePath: true
			}
		}

	]
}

]

# 这个webpack插件的作用：每次打包的时候清除生成目录
npm i clean-webpack-plugin --save-dev

webpack -w --progress --display-reasons --color  # or -watch

# usage

var CleanWebpackPlugin = require('clean-webpack-plugin');

plugins:[
	...,
	# 指定需要清除的目录
	new  CleanWebpackPlugin(['dist'])
]

<!--package.json-->
{
	"scripts":{
		"server": "webpack-dev-server --open"		...
	}
}

## 为什么直接在命令行运行 `webpack-dev-server --open` 不行，在scripts里面就可以？这是node_module的查找方式决定的

<!--webpack.config.js-->
module.exports = {
	...,

	devServer: {
		inline: false, #此种模式进入iframe，访问地址发生变化，同时显示状态条，很少用到
		port: 9001,
		historyApiFallback: {
			rewrites:[
				{
					from: '/pages/a' | regx,
					to: '/pages/a.html' | func
				}
			]
		}| true, # 简单使用的话直接设置为true，任何404都会重定向到index，此时单页面应用重新加载js，单页应用路由生效，进而路径生效

	}
}

const express = require("express"); //创建HTTP服务器的流行框架
const request = require("request"); //封装了 HTTP 请求的各种方法
const app = express(); //实例化一个express对象
app.use("/", function (req, res) {
  var url = "https://facexl.github.io/blog/" + req.url;
  req.pipe(request(url)).pipe(res);
});
app.listen(process.env.PORT || 80); //监听80端口

derServer: {
  proxy: {
    target;
  }
}

headers:{
	'Cookie': '拷贝cookie'
}

# 1
devServer: {
	...
	hot: true
}

# 2
plugins: [
	...,
	new webpack.HotModuleReplacementPlugin(),
	# 3
	new webpack.NamedModulesPlugin()
]


# 4
在代码中，各种loader(...React-hot-loader)帮助我们完成4-6步

if(module.hot){
	module.hot.accept()
}

# 1. 使用eval
Devtool: 'eval',  # 使用eval编译和打包的速度都是非常快的，webpack自带生成代码还存在

Devtool: ‘source-map’， # 使用这个需要在 new webpack.optimize.UglifyJsPlugin()指定source-map参数

推荐使用 Devtool: 'cheap-module-source-map',首次编译会慢，再次编译就快了

npm install eslint eslint-loader eslint-plugin-html eslint-friendly-formatter

<!--webpack.config.js-->

modules: {
	rules: [
		{
			test: /\.js$/,
			include: [path.resolve(__dirname, 'src')],
			exclude: [path.resolve(__dirname, 'src/libs')], # 屏蔽掉源码中第三方的libs，不进行解码
			use: [
				{
					loader: 'babel-loader'
					options: {
						presets: ['env']
					}
				},
				{
					loader: 'eslint-loader',
					options: {
						formatter: require('eslint-friendly-formatter')
					}
				}
			]
		}

	]
}

plugins: [

	# eslint-plugin-import 不管用的话，需要配置如下插件
	new webpack.ProvidePlugin({
		$: 'jquery'
	})

]

devServer: {
	overlay: true,
}

npm install eslint-config-standard eslint-plugin-promise eslint-plugin-node eslint-plugin-import eslint-plugin-standard --save-dev

<!--.eslintrc.js-->

module.exports= {
	root: true,
	extend: 'standard',
	plugins: [
		'html'
	],
	<!--控制全局变量 -->
	globals:[
		$: true
	]
	env: {
		browser: true,
		node: true
	},
	rules: {
		indent: ['error', 4],
		'eol-last':['error', 'never']
	}
}

# webpack.base.config.js 提取公共部分

const merge = require('webpack-merge')

module.exports = {
	entry: {
		app: './src/app.js'
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		publicPath: '/',
		filename: 'js/[name]-bundle-[hash:5].js'
	},
	resolve: {
		alias: {
			jauery$: path.resolve(__dirname, './src/libs/jquery.min.js')
		}
	},
	modules: {
		rules: [

		]
	},
	plugins:[]
}



# webpack.dev.config.js
const webpack = require('webpack');

module.exports = {
	devtool: 'cheap-module-source-map',

	devServer: {
	},

	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NamedModulesPlugin()
	]

}

新增 package.json -> scripts
"dev": "webpack-dev-server --env development --open --config build/webpack.dev.config.js"

# webpack.prod.config.js
const webpack = require('webpack');

module.exports = {
	plugins:[
		new PurifyWebpack({
			paths:glob.sync([
				'./*.html',
				'./src/*.js'
			])
		}),

		new webpack.optimize.CommonsChunkPlugin({
			name: 'manifest'
		}),

		new HtmlInlinkChunkPlugin({
			inlineChunks: ['manifest']
		}),

		new webpack.optimize.UglifyJsPlugin(),

		new CleanWebpackPlugin(['dist'])

	]
}

新增 package.json -> scripts
"build": "webpack --env production --config build/webpack.prod.config.js"

{
	"presets": [
		"env"
	]
}

npm i express opn webpack-dev-middleware webpack-hot-middleware http-proxy-middleware connect-history-api-fallback --save-dev

# webpack.common.config.js

const productionConfig = require('./webpack.prod.conf')
const developmentConfig = require('./webpack.dev.conf')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const path = require('path')
const webpack = require('webpack')

const generateConfig = env => {
    const extractLess = new ExtractTextWebpackPlugin({
        filename: 'css/[name]-bundle-[hash:5].css',
    })

    const scriptLoader = ['babel-loader']
        .concat(env === 'production'
            ? []
            : [{
                loader: 'eslint-loader',
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            }]
        )
    const cssLoaders = [
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2,
                sourceMap: env === 'development'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                sourceMap: env === 'development',
                plugins: [
                    require('postcss-cssnext')()
                ].concat(
                    env === 'production'
                    ? require('postcss-sprites')({
                        spritePath: 'dist/assets/imgs/sprites',
                        retina: true
                    })
                    : []
                )
            }
        },
        {
            loader: 'less-loader',
            options: {
                sourceMap: env === 'development'
            }
        }
    ]
    const styleLoader = env === 'production'
        ? extractLess.extract({
            fallback: 'style-loader',
            use: cssLoaders
        })
        : [{
            loader: 'style-loader'
        }].concat(cssLoaders)

    const fileLoader = path => {
        return env === 'development'
        ? [{
            loader: 'file-loader',
            options: {
                name: '[name]-[hash:5].[ext]',
                outputPath: path
            }
        }]
        : [{
            loader: 'url-loader',
            options: {
                name: '[name]-[hash:5].[ext]',
                limit: 1000,
                outputPath: path
            }
        }]
    }

    return {
        entry: {
            app: './src/app.js'
        },

        output: {
            path: path.resolve(__dirname, '../dist'),
            publicPath: '/',
            filename: 'js/[name]-bundle-[hash:5].js'
        },

        resolve: {
            alias: {
                jquery$: path.resolve(__dirname, '../src/libs/jquery.min.js')
            }
        },

        module: {
            rules: [
                {
                    test:/\.js$/,
                    include: [path.resolve(__dirname, '../src')],
                    exclude: [path.resolve(__dirname, '../src/libs')],
                    use: scriptLoader
                },

                {
                    test: /\.less$/,
                    use: styleLoader
                },

                {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: fileLoader('assets/imgs/').concat(
                        env === 'production'
                        ? {
                            loader: 'img-loader',
                            options: {
                                pngquant: {
                                    quality: 80
                                }
                            }
                        }
                        : []
                    )
                },

                {
                    test:/\.(eot|woff2?|ttf|svg)$/,
                    use: fileLoader('assets/imgs/')
                }
            ]
        },

        plugins: [
            extractLess,

            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './index.html',
                minify: {
                    collapseWhitespace: true
                }
            }),

            new webpack.ProvidePlugin({
                $: 'jquery'
            })
        ]
    }
}

module.exports = env => {
    let config = env === 'production'
        ? productionConfig
        : developmentConfig

    return merge(generateConfig(env), config)
}



# server.js

const webpack = require('webpack');
const express = require('express');
const opn = require('opn');

const aapp = express()
const port = 3000

const webpackDevMiddleware = requrie('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const proxyMiddleware = require('http-proxy-middleware')
const historyApiFallback = require('connect-history-api-fallback')

const config = require('./webpack.common.config.js')('development')
const compiler = webpack(config)  # 执行我们的配置，得到一个compile


const proxyTable = require('./proxy')

for(let context in proxyTable){
	app.use(proxyMiddleware(context, proxyTable[context]))
}

app.use(historyApiFallback(require('./historyfallback')))

app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath
}))

app.use(webpackHotMiddleware(compiler))

app.listen(port, ()=>{
	console.info('success',port);
	opn('http://localhost:' + port)
})

# historyfallback.js # 单独提取出原配置文件中 history-api-fallback 的部分

 module.exports = {
 	htmlAcceptHeaders:['text/html', 'application/xhtml+xml'],  # 告诉插件我们需要什么样的请求头
 	rewrites: [
 		{
 			from: /!\//.....,
 			to: function(ctx){...}
 		}
 	]
 }


# proxy.js # 单独提取出原配置文件中 devServer 的配置部分

module.exports = {
		'/.+':{
		...
		}
}


# package.json -> scripts

"start": "node build/server.js"

webpack --profile --json > stats.json

上传stats.json文件到 http://webpack.github.io/analyse/ 获取建议

npx create-react-app my-project  # npm 5.2+

{
	“proxy”：{
		"/api": {
			"target": "http://www.baidu.com",
			"changeOrigin": true
		}
	}

}