Enter vscode
New Folder
New Directory
dist directory for the package output
src as the source directory
Ctrl + ~ to open the terminal
to perform initialization commands
npm init -y
will be one more file (Note: Items folder name do not have Chinese)
Similar maven pom file in the
demo example, add background color to a bunch of li
<!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 src="./main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>
Run download jquery
npm i jquery -S
main.js
// 程序入口js
import $ from 'jquery'
$(function(){
$('li:odd').css('background','red') // 奇数红
$('li:even').css('background','green') // 偶数绿
})
Html will find that running is not supported es6 syntax
of performing a packing command
webpack .\src\main.js -o .\dist\bundle.js
In html directly introduced <script src="../dist/bundle.js"></script>
in open html, see the color
By the above example, it can be seen webpack function
- 1. interdependence can handle js files (only to have the entrance main.js can, under ideal conditions, but generally not enough)
- 2. Process compatibility issues, packaged
Note: At this point main.js modification does not affect the bundle.js, every change requires re-packaged
solution:
create a new profile in the project root directory
const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
path : path.join(__dirname,'./dist') ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
}
}
Then, direct execution webpack command, you can complete package
Project to modify the frequency is very frequent, every modification is completed and then re-packaged or too much trouble, we installed a new tool webpack-dev-serverto automatically complete package compilation
# 本地安装webpack
npm i webpack -D
# 安装到项目的本地开发依赖 -d 本地安装，没有全局安装
# 不能再终端中直接运行名，只有全局 -g 安装的才能在终端正常执行
npm i webpack-dev-server -D
# 下载安装webpack-cli
npm iwebpack-cli -D
The modified webpack.config.js
const path = require('path')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
}
}
Execution · npm run dev · start the project, and then modify js, not allowed to repackage
Note:
webpack not updated in real-time modifications, just a packaging tool, webpack-dev-server will automatically update in real time to modify
webpack packaging output path, output field packed output path for the path, webpack-dev-server, the Output field is publicPath (this the default value is empty when the project root directory)
WebPACK package output file, is really present in the physical address of the path, rather webpack-dev-server package output file is saved in memory, is looking for in the project directory less than.
If we do not webpack.config.jsspecify in publicPath: 'dist', then in html, js file path should be cited<script src="/bundle.js"></script>
Perfect configuration
// --open表示启动自动打开浏览器
// --port 指定端口
// --contentBase src 自动进入src目录
// --hot每次修改，不在重新生成文件，而是修改原有文件
"dev": "webpack-dev-server --open --port 9999 --contentBase src --hot"
How html package
# 安装html打包插件
npm i html-webpack-plugin -D
webpack.config.js
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
]
}
and! ! ! html does not require the introduction of bundle.js, because the plug-in will automatically help us additional bundle.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 src="/bundle.js"></script> -->
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
</body>
</html>
Processing css file
Here we do not recommend the use of a direct link of the way, because there will still be two times Request
An inlet for introducing the document main.js
// 程序入口js
// 导入jquery
import $ from 'jquery'
// 导入css
import './css/index.css'
After the error will not be used to save, because the process can only be packaged webpack js types of files, we need to install a third-party loader loader
npm i style-loader css-loader -D
In webpack.config.jsthe new configuration a node module, it is an object, in the rules attribute, matching rule holds all third-party modules
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
],
module : {
rules : [ // 所有第三方模块匹配规则
// 匹配以.css结尾的的文件，使用style-loader，css-loader处理，顺序从右到左调用
// 即css-loader先处理，style-loader后处理，都处理完毕，交给webpack打包
{test: /\.css$/,use: ['style-loader','css-loader']}
]
}
}
Check whether npm run dev run css file to take effect
less packing process and scss
main.js entry file
import './css/index.css'
import './css/index.less'
import './css/index.scss'
If there is an abnormality during installation, you can choose to try download cnpm
# 安装cnpm
npm i cnpm -g
# 安装less和less-loader
# less-loader内置依赖less，不许要在配置文件中配置less,sass同理
npm i less -D
npm i less-loader -D
npm i sass -D
npm i sass-loader -D
cnpm install node-sass@latest
Profiles
const path = require('path')
// 导入插件
// 作用：
// 1.自动在内存中生成一个html;
// 2.自动把打包好的bundle.js追加到页面中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件就是一个 js 文件，通过node中的模块操作，向外暴露一个配置对象
module.exports = {
entry : path.join(__dirname,'./src/main.js'),// 入口，表示要使用webpack打包哪个文件
output :{
// publicPath: 'dist' ,// 指定输出目录
filename : 'bundle.js' // 这是指定输出的文件名称
},
plugins:[
// 创建一个在内存中生成html页面的插件
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'), // 指定模板页面
filename : 'index.html' // 指定生成的页面名称
})
],
module : {
rules : [ // 所有第三方模块匹配规则
// 匹配以.css结尾的的文件，使用style-loader，css-loader处理
{test: /\.css$/,use: ['style-loader','css-loader']},
{test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']}
]
}
}
It is worth mentioning that, from the beginning webpack2.x, style-loaderthe -loadneed to write, while the version 1.x is not written
Reproduced in: https: //www.jianshu.com/p/7cf3c01248fa