入门 Webpack，看这篇就够了 - 简书登录注册写文章首页下载APP会员IT技术入门 Webpack，看这篇就够了xpwei关注赞赏支持入门 Webpack，看这篇就够了什么是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"]
}]
}]]
推荐阅读更多精彩内容你一定喜欢看的 Webpack 2.× 入门实战最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...My_Oh_My阅读 7,845评论 40赞 247webpack教程无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到...小小字符阅读 7,840评论 7赞 35iOS+环信SDK实现即时通讯APP写在前面：在自学了一段时间的iOS开发之后，为了验证自己学习的知识的水平，遂决定利用第三方(环信即时通讯SDK)即...我七岁就很帅阅读 1,281评论 3赞 127月23日   顾秋艳简书姓名：顾秋艳日期：7月23日 这个月快要过去了，没有完成自己定的目标，我还是很需要接触一些陌生的圈子，多参加些活动...美乐家环保天使阅读 176评论 0赞 021天挑战暗线哆唻咪Day17一一条暗线画四天（四）拼布童话阅读 57评论 0赞 0评论0赞33赞4赞赞赏更多好文