手把手从0创建webpack并部署到本地服务器 - 好文

webpack是js应用程序的静态资源的模块打包器，webpack在处理应用时，在内部会有一个各个模块的依赖图，然后将所有同类型的静态文件资源打包成一个或者多个bulder。

相信的初学者看到webpack是一脸懵逼，好不容易学会了一种前端框架，但在大型项目中的webpack也是必不可少的，所以有时候需要自己去动手改造一下webpack，接下来就是消除对webpack的恐惧和逃避心理，从建立一个js文件开始逐步实现webpack的打包以及部署到本地服务端。让你看到webpack不再逃避，而是很有兴趣去研究它。

这个是网上经常出现的关于webpack作用的形象图。
在使用的webpack4版本和以前的版本略有不同。

先下载webpack和webpac-cli，4版本以后，webpack-cli和webpack分开了，两者都使用全局安装
接下来创建一个文件夹，底下包含一个简单的html，js，css文件，这个就是我们从0实现webpack的打包部署的第一步。

简单的目录如下：

index.js文件是项目的入口文件，所有有关的依赖都将在这个文件中进行处理。
middle.js是一个js文件，将被在index.js中调用。
style.css是一个css的样式文件，也将在index.js中引用。
// miidle.js const json = { str : '第一个webpack打包文件' } moudule.exports = json //
style.css .mian { background: '#f7f7f7', color: 'lightgreen' } // index.js
const json =require('./middle.js') require(
'!style-loader!css-loader!./style.css') document.write(`<div class = 'main'
>${json.str}</div>')
由于webpack不支持非js文件的直接打包，所以我们需要对css进行打包的时候，使用style-loader和css-loader，顺序不能反。
先下载这两个依赖包，然后在进行引用，下载方法就是正常下载。不做介绍。
index.html中引入一个不存在的目录./dist/main.js’，先不要管，就这样用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
"viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
"X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type = '
text/javascript' src = './dist/main.js'></script> </head> <body> </body> </html>
完成之后，这四个文件进行保存，cd到文件夹下，webpack4现在不支持使用命令webpack a.js b.js的命令了。直接使用webpack
index.js，按回车，就会发现项目下多出了一个dist文件夹，底下还有一个main.js文件，打开文件，看不懂。但是将index.html在浏览器中打开可以看到加了前景色和后景色的
第一个webpack打包文件的字，和想象中是一样的。此时简单的一个webpack手动构建就完成了。

若还要引入第三方库，如jquery的时候，先下载npm install jquery
接下来在index.js中引入。
// index.js const json = require('./middle.js') require(
'!style-loader!css-loader!./style.css') const $ = require('jquery') document
.write(`<div class = 'main'>${json.str}</div>')
$('.main').html('我是被jquery修改的内容').css({'background':'red'})
执行webpack index.js 重新打包一下，刷新浏览器，出现想要的结果，说明webpack打包引入第三方库也没有问题。

难道每次修改了文件就需要webpack index.js？更间接地方法就是，接下来npm init 一下，发现根目录下出现一个package.json,
在当前根目录下新建一个webpack.config.js，内容如下
module.exports = { entry: './src/index.js', output: { path: __dirname+'/dist',
filename:'main.js' }, module: { rules: [{ test: /\.css$/, loader:
'style-loader!css-loader' }] }, devtool: 'eval-source-map' }
在这个里面有一个入口文件就是我们将所有东西都集中的文件，出口文件是dist/main.js。

module中的rules是数组，由于js不能直接处理非js文件，所以可以有多种加载器来进行转化，为js可以处理的文件。如vue-loader、sass-loader.
devtool, 是文件出错点击错误直接跳到出错对应的源码，否则会跳到编译后的main.js文件中，难定位错误。
{ test: /\.js$/, loader: 'babel-loader', include: projectRoot, exclude:
/node_modules/}, { test: /\.html$/, loader: 'vue-html-loader', exclude:
/node_modules/,}, { test: /icons\/.*\.svg$/, loader:
'external-svg-sprite-loader', options: { name: 'static/img/sprite.svg', prefix:
'icon', svgoOptions: { plugins: [ { removeTitle: true }, {
removeUselessStrokeAndFill: true } ] } } }, { test:
/\.(png|jpe?g|gif|svg|cur)(\?.*)?$/, exclude: /assets\/icons/, loader:
'url-loader', options: { limit: 10000, name: utils.assetsPath(
'img/[name].[hash:7].[ext]') } }

以上都是一些常用的loader和使用方法，其中的exclude就是不会匹配node_modules底下的文件，其他地方的文件都可以匹配到并进行loader转换。
好了，这个webpack.config.js目前是配置好了，再回到package.json中找到script字段，清空，在该字段下添加”dev”:
“webpack”
进行以上修改配置后，在启动项目使用npm run dev这样就可以实现和webpack index.js一样的效果了。

但是我们又还想将这个项目部署到本地服务器，每次修改内容后，浏览器自动刷新的效果。
接下来就要说到webpack-dev-server了，它就是一个小型的服务器。忽然发现每次使用webpack
init的vue项目可以跑在本地服务器上，应该就是webpack-dev-serverde作用吧。
接下来下载 npm install webpack-dev-server –save-dev -g
安装成功后你的node_modules和package.json中会出现webpack-dev-server文件夹或者文件名。

同样在package.json中的script中修改为这样
"start": "webpack-dev-server --entry ./src/index.js --output-filename
./dist/main.js", "dev": "webpack --watch"
启动两个服务，npm run dev
npm start // 默认启动8080端口，可以在webpack.config.js添加devServer{port：3000}修改端口号。

–watch的作用就是检测内容的变化，只要保存就会触发，服务器刷新，浏览器变化。
这样就实现了文件随时修改浏览器实时刷新。

webpack.config.js必须是这个名字吗？
不一定，这只是默认的名字你可以修改为任何你认为有特定意义的名称。如webpack.base.config.js,但是在package.json中dev改成这样
"dev": "webpack --config webpack.base.config.js --watch --mode development"
其实从一开始这个mode就必须指定，在webpack4版本后，不指定会有提示，
WARNING in configuration The 'mode' option has not been set, webpack will
fallbackto 'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment. You can also set it to
'none' to disable any default behavior. Learn more: https
://webpack.js.org/concepts/mode/
其中可以指定为development或者production,即开发环境和生产环境。
开发环境与生产环境的区别开发环境 NODE_ENV 为 development 启用模块热更新（hot module replacement）额外的
webpack-dev-server 配置项，API Proxy 配置项输出 Sourcemap 生产环境 NODE_ENV 为 production 将
React、jQuery 等常用库设置为 external，直接采用 CDN 线上的版本样式源文件（如 css、less、scss 等）需要通过
ExtractTextPlugin 独立抽取成 css 文件启用 post-css 启用 optimize-minimize（如 uglify 等）
中大型的商业网站生产环境下，是绝对不能有 console.log() 的，所以要为 babel
配置 Remove console transform

有时候一些项目中会出现三个webpack文件，一般为webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js。分别为开发环境和生产环境的通用配置，开发环境配置，生产环境配置。
后两者肯定是继承于前者的。

更详细的介绍参考https://zhuanlan.zhihu.com/p/29161762
<https://zhuanlan.zhihu.com/p/29161762>

热门工具换一换