本文目录一览：
使用 webpack 打包 js
通过 命令行工具打包: webpack app.js bundle.js; 打包完成后会在同目录下生成bundle.js.
app.js: 入口文件;
bundle.js: 打包好的文件。
通过amd规范定义的, 打包后会生成一个bundle.js 和 一个 1.bundle.js， 两个bundle.js 文件
关于webpack替换文件hash的问题，有人有过这方面经验吗
首次使用Webpack, 用CLI, 即Command Line Interface
→ 确认是否安装了NodeJS
npm -v
→ 安装 Webpack
npm install webpack -g
→ 创建一个简单的网站
.....webpacktest/
..........app.js
..........index.html
→ 导航到webpacktest所在文件夹
→ 对app.js文件使用webpack
webpack ./app.js bundle.js
→ 我们看到在webpacktest目录下多了一个bundle.js文件
→ 现在，可以在index.html中引用bundle.js文件，而不是app.js文件
■ 在项目中添加配置文件
→ 在项目根目录下创建名称为webpack.config.js文件
当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
}
}
→ 命令行来到需要Webpack的网站下
→ 直接输入webpack命令
webpack
■ 启用Webpack观察者模式
当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受观察，自动生成最终的js文件。
→ 命令行来到需要Webpack的网站下
→ 启用观察者模式
webpack --watch
→ 在webpack.config.js中添加watch字段，并设置成true
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
watch: true
}
→ 这样，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新。
■ 安装启用Webpack DevServer
→ 导航到目标网站目录
→ 输入npm命令安装Webpack DevServer
npm install webpack-dev-server -g
→ 输入webpack-dev-server命令
webpack-dev-server
→ 看到大致如下内容
webpack result is served from /
cotent is served from D:...
Hash:...
Version:webpack1.12.4
Time:94ms
...
webpack: bundle is now VALID.
→ 在浏览器中输入：
同时显示app.js文件中console.log和document.write的内容。
→ 修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新
→ 如果不想显示console.log内容呢？
→ 在浏览器中输入：
→ 此时，再修改webpack.config.js中依赖的文件并保存，浏览器的内容却不会更新？
→ 再次回到命令行，加入一个inline的flag
webpack-dev-server --inline
→ 此时，如果修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新了☺
■ Bundling多个文件
→ 在项目下再添加一个login.js文件
console.log('login loaded');
→ app.js中引用login.js文件
require('./login');
document.write("Welcome to Big Hair Concerts!!Baby");
console.log('App loaded');
→ 在浏览器中输入：
可以看到变化。
→ 在项目下再添加一个utils.js文件
console.log('logging from the utils.js file...');
→ 来到webpack.config.js下配置如下：
module.exports = {
entry: ["./utils","./app.js"],
output: {
filename: "bundle.js"
},
watch: true
}
→ 命令行导航到当前项目下
→ 重新启用Webpack DevServer
webpack-dev-server
→ 在中体现了相应的变化
使用webpack4从0开始打包一个antd项目
$ npm install -g cnpm --registry= // 安装cnpm
$ mkdir project // 根目录下创建一个名为project的文件夹
$ cd project cnpm init // 进入project文件夹 并初始化该项目 终端会提示一些配置，一路键入enter最后yes即可。 初始化完成会生成一个pakage.json文件
$ cnpm i --D webpack webpack-dev-server webpack-cli // webpack4.x 必须安装webpack-cli。
根目录下新建文件src/index.js
$ npm run build // 此时我们可以执行npm run build 代替npx webpack。 构建成功后根目录下自动生成 dist/main.js。
为什么我们没有对webpack进行任何配置，却可以成功打包？那是因为在没有配置入口文件的情况下， webpack 4.x会自动查找src/index.js作为入口文件进行打包。
这里我们需要了解webpack4个核心概念——入口(entry)、输出(output)、loader、插件(plugins)。
根目录下创建webpack.config.js
$ cnpm run build
我们可以看到根目录下打包出了dist/main.js。
这时候如果我们将webpack.config.js中入口配置改为
$ cnpm run build
重新构建我们发下dist目录下多出了一个app.js文件，上一次打包的main.js还在，如果我们希望每次打包之前先清除掉上一次的打包文件，则需要用到clean-webpack-plugin插件。
$ cnpm i -D clean-webpack-plugin // vesion: 6.13.4 (6.x版本与低版本引入方式不一样)
安装后我们在webpack.config.js里进行配置 。
首先引入clean-webpack-plugin
再在plugins里实例化
$ cnpm run build
重新构建，我们可以看到上一次打包出的dist/app.js已经删掉了。
首先我们在dist目录下手动增加一个index.html文件，引入main.js
在chrome中打开该html文件，我们可以看到控制台中成功打印出hello world
那么问题来了，难道我们每次打包需要手动在dist目录下添加一个html文件吗？ 显然不可能，这时候我们需要用到html-webpack-plugin插件自动添加html文件。
我们先将dist/index.html文件移动到src下，去掉script标签。
$ cnpm i -D html-webpack-plugin
安装好后一样先引入插件 具体插件配置参考官网
$ cnpm run build
此时我们看到dist目录下自动生成了一个index.html文件，里面包含了div id="root"/div,
这是因为我们在模板文件里写过。之前我们已经安装过了webpack-dev-server，并在package.json脚本里配置了"dev": "webpack-dev-server" 此时我们可以运行
$ cnpm run dev
终端提示自动运行在localhost:8080, chrome上打开8080端口，查看控制台，我们可以看到打印出了hello world。
$cnpm run dev
这时我们可以看到该项目已经运行在我们制定的端口8989上了。
$ cnpm i -D style-loader css-loader less-loader file-loader url-loader
我们在src目录下新建一个images文件夹，然后拖入一张图片，这里图片名用了smokinggirl.jpeg。 再在src目录下新建一个index.less文件。
然后修改src/index.js src/index.less
src/index.less
webpack.config.js中module部分增加配置
$ cnpm run dev
可以看到有一个宽200px的图片显示出来。
这样打包出来的css 样式会作用到全局，如果页面多可能会相互影响，这时候我们可以启用css模块，配置稍作修改
src/index.js
$cnpm run dev
这时候我们可以看到图片成功显示出来，但仔细观察图片类名，是一串自动生成的字符，与我们自己定义的类名没有半点关系，那么如何显示出我们定义的类名呢？
$ cnpm run dev 这时候可以看到打包出的类名符合我们定义的形式。
但仔细观察，我们发现body还有默认样式，我们可以在index.html引入一个公共样式文件，去除默认样式。
src目录下 新建common/reset-style.css, 写个简单的去默认样式的文件
然后在html模板文件 src/index.html中引入，
这时候我们运行，发现报错找不到该文件。这是因为我们在index.html里引入该文件，但webpack没有打包编译。这时候我们需要用到插件copy-webpack-plugin
$ cnpm i -D copy-webpack-plugin
重新运行，我们可以看到原先的默认样式body的边距已经没有了。
$ npm i -S react react-dom
安装完react、react-dom 还不够，我们需要babel做翻译，才能让浏览器读懂。
$ cnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs2
安装好后根目录新建.babelrc文件。
webpack.config.js 的module里增加babel-loader的配置
配置好我们来写react文件
新建src/page/content/index.js, 将src下的index.less拖入content目录下。
接下来改造src/index.js 入口文件
然后运行 我们可以看到页面正常显示。到这里我们已经可以正确打包并运行react项目了。
$ cnpm i -S antd
根据antd官网描述，我们还需要在入口文件引入一个样式文件。
src/index.js
到这里我们可以发现一个问题，我们对css文件打包的时候启用了模块，很明显这样直接引用是不行的。 antd的样式是从node_modules里引用的，那么我们的思路就是打包css文件时去除掉node_modules里面的文件再启用模块，node_modules里面的文件不启用模块。
接下来我们对webpack.config.json进行改造。
只有这样还不够，我们需要用到babel-plugin-import插件实现按需加载，antd样式应用到全局需要用到此插件。
$cnpm i -D babel-plugin-import
.babelrc
ok现在我们来改造一下src/page/content/index.js文件，引入一个antd组件。
现在我们来运行，发现报了个错
提示我们需要安装一个@babel/plugin-proposal-class-properties插件。
$ cnpm i -D @babel/plugin-proposal-class-properties
然后我们需要在babel的配置文件中加入它
现在我们重新运行 $ cnpm run dev 一个简单的包含antd组件的页面就完成了。
。