webpack 是一个构建工具，针对各种静态文件进行依赖、压缩(图片转Base64格式)、解析(Scss-Less-TypeScript 引擎)、合并等等自动化操作。
webpack 的各种插件可以直接应对各种场景,能使前端开发流程化,只需要一开始配置好脚本就可以.
入门教程:
Webpack 指南 :
https://zhuanlan.zhihu.com/p/20367175
https://zhuanlan.zhihu.com/p/20397902
https://zhuanlan.zhihu.com/p/20522487 --> React配合开发
下面罗列 webpack 能够解决大型开发遇到的问题 :
文件依赖. 部署前置处理.
依赖
早期我们通过 特定的顺序 来进行安排 Javascript 、CSS 依赖关系.
<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="index.js"></script>
导致的问题：
- http请求过多
- 过多的全局变量模糊等
解决方法 ：
使用CommonJS 或者 ES6 模块 , 或者使用 RequireJs
// Version.js
module.exports = { version: 1.0 };
// App.js
var config = require('./Version.js'); // require 不能在浏览器中直接使用,需要Babel,这都是打包过程
console.log('App Version:', config.version);
压缩
举个例子:针对某些低于一定的大小的图片文件,可以通过 配置 转化Base64 格式.
按需加载
需要用到的资源才会http请求.
常用的开发版本配置文件如下
/**
* 该文件名- webpackDevConf.js
* 编码作者- 许道龙
* 创建日期- 2017/1/3 09:23
* 作者邮箱- xudaolong@vip.qq.com
* 作者博客- http://xudaolong.github.io/
* 修改时间-
* 修改备注-
* 编码内容-
*/
const path = require('path');
const {resolve} = require('path');
const {existsSync}= require('fs');
const webpack = require('webpack');
// plugin
const HtmlWepackPlugin = require('html-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// path
const rootPath = path.resolve(__dirname);
const webPath = path.resolve(rootPath, '../../web');
const ThemePath = path.resolve(rootPath, '../../web/utils/antdTheme.js');
const buildPath = path.resolve(rootPath, '../../web/build');
const nodeModules = path.join(__dirname, '../../node_modules');
module.exports = {
entry: [
'babel-polyfill',
'react', // Include this to enforce order
'react-dom', // Include this to enforce order,
'./web/index.web.jsx'
],
output: {
path: buildPath,
filename: '[name].[hash].v1.0.0.js',
publicPath: '/',
chunkFilename: '[name].chunk.js'
},
//resolve path
resolve: {
modulesDirectories: ['node_modules', nodeModules],
extensions: ['', '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
},
module: {
loaders: [
// jsx
{
test: /(\.js|\.jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
// include: webPath,
query: {
cacheDirectory: true,
presets: [
['react'],
["es2015"],
['stage-0']],
//transform-class-properties:支持es6 static
plugins: ["transform-class-properties", ["import", {"libraryName": "antd", "style": true}]]
}
},
// css
{
test: /\.css$/,
loaders: ['style', 'css']
},
// less
{
test: /\.less$/,
loaders: [
'style-loader',
'css-loader',
'postcss',
`less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(require(ThemePath)())}}`
],
},
// Boootstrap font image loader
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
},
// URL image loader
{
test: /\.(png|jpg|jpeg)$/,
loader: 'file-loader?name=img/[hash:8].[name].[ext]'
},
// svg
{
test: /\.svg$/,
loader: 'raw-loader'
}
]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
// new Visualizer(),
new HtmlWepackPlugin({
filename: `index.html`,
inject: true,
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: true //删除空白符与换行符
}
}),
],
externals: {}
};
生产版本配置
/**
* 该文件名- webpackProConf.js
* 编码作者- 许道龙
* 创建日期- 2017/1/3 09:24
* 作者邮箱- xudaolong@vip.qq.com
* 作者博客- http://xudaolong.github.io/
* 修改时间-
* 修改备注-
* 编码内容-
*/
"use strict";
var WebpackStripLoader = require('strip-loader');
var devConf = require('./webpackDevConf');
var webpack = require("webpack");
// 去除console.log代码
var stripLoader = {
test: [/\.js$/, /\.es6$/],
exclude: /node_modules/,
loader: WebpackStripLoader.loader('console.log')
};
devConf.module.loaders.push(stripLoader);
// 代码压缩
var uglifyJs = new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
});
devConf.plugins.push(uglifyJs);
// 为react指示编译生产环境代码
var definePlugin = new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
});
devConf.plugins.push(definePlugin);
module.exports = devConf;
