Implement real-time packaging and construction of webpack
- Since every time the code is re-modified, it is necessary to manually run the webpack packaging command, which is troublesome, so it is used to
webpack-dev-serverrealize real-time packaging and compilation of the code. After the code is modified, the packaging and construction will be automatically performed. - Run
cnpm i webpack-dev-server --save-devto install development dependencies - After the installation is completed, run it directly
webpack-dev-serveron the command line for packaging and find an error. At this time, you need to usepackage.jsonthe instructions in the file to runwebpack-dev-serverthe command.scriptsAdd"dev": "webpack-dev-server"instructions under the node and find that real-time packaging can be performed, but there is no such command in the dist directory. Generatebundle.jsfiles becausewebpack-dev-serverthe packaged files are placed in memory
- The advantage of putting
bundle.jsit in memory is that since it needs to be packaged and compiled in real time, putting it in memory will be very fast. - At this time, visit the website started by webpack-dev-server
http://localhost:8080/and find that it is a folder panel. You need to click to the src directory to open our index homepage. At this time, the bundle.js file cannot be referenced and you need to modify index.html. The src attribute of script is:<script src="../bundle.js"></script> - In order to
http://localhost:8080/directly access the index homepage when accessing, you can use--contentBase srcthe command to modify the dev command and specify the root directory for startup:
"dev": "webpack-dev-server --contentBase src"
At the same time, modify the src attribute of the script in the index page to<script src="bundle.js"></script>
2 ways to implement webpack-dev-server configuration commands
Configuring the startup page using html-webpack-pluginplugins
Since --contentBasethe process of using the command is cumbersome, you need to specify the startup directory, and you also need to modify the src attribute of the script tag in index.html, so it is recommended that you use a html-webpack-pluginplug-in to configure the startup page.
- Run
cnpm i html-webpack-plugin --save-devto install development dependencies - Modify
webpack.config.jsthe configuration file as follows:
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}
package.jsonThe dev instructions in the node being modifiedscriptare as follows:
"dev": "webpack-dev-server"
- Comment out the script tag in index.html, because
html-webpack-pluginthe plug-in will automatically inject bundle.js into the index.html page!
Achieve automatic opening of the browser, hot update and configure the default port number of the browser
Note: Hot updates are not obvious in JS. You can introduce them from the CSS that will be discussed later!
Way 1:
- The modified
package.jsonscript node is as follows, which--openmeans automatically opening the browser,--port 4321indicating that the opened port number is 4321, and--hotindicating that browser hot updates are enabled:
"dev": "webpack-dev-server --hot --port 4321 --open"
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
"dev": "webpack-dev-server"
},
Way 2:
- Modify
webpack.config.jsthe file and adddevServerthe following nodes:
devServer:{
hot:true,
open:true,
port:4321
}
- Import the module at the head
webpack:
var webpack = require('webpack');
pluginsAdd under node :
new webpack.HotModuleReplacementPlugin()
const path = require('path')
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
// 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
output: {
// 输出文件相关的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
},
devServer: {
// 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
// --open --port 3000 --contentBase src --hot
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启用热更新 的 第1步
},
plugins: [ // 配置插件的节点
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
new htmlWebpackPlugin({
// 创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
filename: 'index.html' // 指定生成的页面的名称
})
],
module: {
// 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{
test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
{
test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
{
test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
]
}
}
// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；