什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
原文链接：入门 Webpack，看这篇就够了
优化插件
使用UglifyJsPlugin时，4.X高版本需要额外安装，使用方法和其他插件一样。
使用ExtractTextPlugin时，报错
解决方式：
经过排查发现是由于extract-text-webpack-plugin目前还没有webpack4版本。可以使用该方式npm install extract-text-webpack-plugin@next解决。
//package.json
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"main": "index.js",
"dependencies": {
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "^4.7.0"
},
"devDependencies": {
"autoprefixer": "^8.4.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^2.1.5",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"start": "webpack --mode development",
"server": "webpack-dev-server --open",
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
},
"author": "xpwei",
"license": "ISC"
}
//webpack.production.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devtool: 'null',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
devServer: {
contentBase: "./build",
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: [{
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}],
})
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJsPlugin(),
new ExtractTextPlugin("style.css"),
new CleanWebpackPlugin('build/*.*',{
root:__dirname,
verbose:true,
dry:false
})
]
}
//webpack.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devServer: {
contentBase: "./build",
historyApiFallback: true,
inline: true,
hot:true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options:{
module:true,
localIdentName:'[name]__[local]--[hash:base64:5]'
}
},
{
loader:"postcss-loader"
}
]
}
]
},
plugins:[
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template:__dirname+"/app/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin()
]
}
//.babelrc
{
"presets": [
"react",
"env"
],
"env": {
"develoment":{
"plugins":[["react-transform",{
"transforms":[{
"transform":"react-transform-hmr",
"imports":["react"],
"locals":["module"]
}]
}]]
}
}
}
