01、简单使用
01、建一个空文件夹
--testwebpack
02、创建package.json配置文件
--npm init -y
03、项目全局安装webpack
--npm install webpack -g
04、安装项目依赖
--npm install webpack --save-dev
--安装之后package.json中会增加
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
05、创建并配置webpack.config.js
let path = require('path')
let webpack = require('webpack')
module.exports = {
entry:'./index.js',
output:{
path:path.join(__dirname,'dist'),
filename:"bundle.js"
},
module:{
rules:[
]
}
}
06、创建index.js和index.html,一个为入口文件，一个为普通的html文件
--在index.js里面写上这行测试用途的代码
document.write(“hello world”);
07、通过npm安装webpack-dev-server
--npm install webpack-dev-server --save-dev
08、webpack.config.js中热加载进行配置：
let path = require('path')
let webpack = require('webpack')
module.exports = {
entry:'./index.js',
output:{
path:path.join(__dirname,'dist'),
filename:"bundle.js"
},
module:{
rules:[
]
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
//对webpack-dev-server进行配置
contentBase:'./',
historyApiFallback:true,
inline:true,
hot:true
}
}
09、对webpack-dev-server的的启动进行一下设置
--"scripts"-->"start": "webpack-dev-server --inline"
{
"name": "test_npm",
"version": "1.0.0",
"description": "this is a test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
10、安装webpack-cli
--npm i -g webpack-cli(全局安装)
--npm install webpack webpack-cli -D(本地继续安装)
11、打包
--webpack
12、index.html页面
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
13、启动项目
--npm run start
--出现｢wdm｣: Compiled successfully. 按ctrl+c离开
--http://localhost:8080/访问
02、详细解释第一个项目
01、npm init -y
--使用-y参数，不需要一项一项同意，遵循默认输入
02、全局安装webpack webpack-cli--这种方式会导致版本不兼容
--npm install webpack webpack-cli -g //webpack-cli可以帮助我们在命令行里使npx,webpack等相关指令
--webpack -v
--npm uninstall webpack webpack-cli -g
03、局部安装
--npm install webpack webpack-cli --save-dev / -D
--webpack -v //command not found 默认在全局环境中查找
--npx webpack -v// npx帮助我们在项目中的node_modules里查找webpack
04、安装指定版本
--npm info webpack //查看webpack的历史发布信息
--npm install webpack@x.xx webpack-cli -D
05、webpack4出现了默认打包功能，但是功能极弱只能使用js打包，默认通过入口文件index.js进行打包
--新建index.js
06、本项目打包可以使用
--npx webpack //如果报错没有入口文件，可以在webpack.config.js中module.exports = {}配置
entry:'./index.js',或者使用接下来的命令
--npx webpack index.js
--在webpack.config.js中配置entry和output，上面配置的事entry接下来配置的是output，如果不配置则默认是/dist/main.js，配置的实例如下所示：
output:{
path:path.join(__dirname,'dist'),
filename:"bundle.js"
}
07、新建a.js b.js，写入a() b()js函数，在index.js中导入，并且记住webpack默认使用js打包，重新使用npx webpack更新bundle.js
--import a from './a';
--import b from './b';
--a();
--b();
08、解释为什么要用webpack.config.js，因为打包功能太弱，通过命令行的形式进行打包不足以完成全部功能，所以需要使用webpack配置文件/名称默认为webpack.config.js
03、webpack.config.js配置文件
01、默认webpack.config.js配置文件
--npx webpack //根目录下
02、使用自己独立的配置文件进行打包的webpack命令，当然可以和默认名称一致，但不推荐
--npx webpack --config singleWebpackConfig.js //根目录下
03、自定义配置文件
01-定义打包入口 和 输出文件位置及名称
module.exports = {
//指定打包的入口
entry: "./index.js",
//打包输出文件位置
output: {
}
}
02、output中加入路径
--首先加入 let path = require("path");
--在output中加入键值对：path: path.resolve(__dirname, "./build"), 表示打包输出在当前目录下一个名为build的文件夹中
--在在output中加入键值对：filename: "bundle.js", 表示打包输出在build/bundle.js文件中
03、在webpack项目中虽然默认使用js打包，但是一个项目不可能就使用js，还包括各种img/css等文件
接下来就是配置这些文件
--在项目根目录下建立，images文件夹，直接在index.js中import pic from './images/二次元.jpg'，在启动项目时会报错无法找到文件，所以这里需要引入新的概念loader
04、loader:在配置文件中对于不认识的模块/一般就是非js模块了，会专门给出一个module进行配置，具体配置如下：
--file-loader实例
module:{
//遇到不认识的模块就在这里写
rules:[
{
test: /\.jpg$/,
use: {
loader: "file-loader",
options: {
//name是打包前模块名称 hash是哈希码 ext是打包前模块的格式
name: "[name]_[hash].[ext]",
outputPath: "./images"
}
}
}
]
},
--这里file-loader需要安装，npm i file-loader -D
--在官网里面可以查看各种loader，加载像vue/css/等各种模块，定义不同module{test*** ***}即可
--在重新运行npm run bundle打包之后，图片被转化成一串hash字符串命名的图片，如果希望命名自定义可以在options中定义，这里就需要引入占位符概念
--outputPath是指在输出dist文件夹中再创建一个images文件夹用于存放图片
--url-loader实例：file-loader加强版
--npm install url-loader -D
--webpack.config.js中使用
--loader: "url-loader",
--limit: 2048000, //大小超过2048000就单独放在文件夹中，否则就以base64的编码格式存放在html中
--npm run bundle //打包
--和file-loader区别：url-loader根据文件大小，决定是否将文件以base64格式存放在html中，以减少http请求
05、多种图片处理 和 css等文件处理实例
--test: /\.(png|jpe?g|gif)$/, //这里使用多种图片格式同时处理，类似于re正则，后面use基本一致
--{
//test: /\.jpg$/
test: /\.(png|jpe?g|gif)$/,
use: {
//loader: "file-loader", 这个是file-loader
loader: "url-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
limit: 2048
}
}
}
--css的loader使用：css-loader 和 style-loader
--创建test_css.css文件
--npm install style-loader css-loader -D
--在webpack.config.js文件module: rulesz中新增[{test:, use:}]
--css-loader: 将所有css文件提取出来，合并打包
--style-loader: 将所有的提取出来的css文件放在html的head头中
--{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
--scss的loader使用：sass-loader node-sass
--引入loader加载顺序概念，这里loader加载顺序是从后向前，因此css-loader在后面先提取css文件，再通过style-loader放在html文件中
--npm install sass-loader node-sass -D //安装插件
--js文件中导入import './test_other.scss';
--npm run bundle即可
--{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
--postcss-loader的使用：对于不同浏览器添加不同标识
--安装npm i postcss-loader -D
--添加module，这个只要找一个已有规则添加进去就好/这里是css
--{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
--使用该loader必须使用单独的config.js文件，新建postcss.config.js，加入如下配置但是后面会按需增删
--module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
};
--加入自动添加前缀插件
--npm i autoprefixer -D
--module.exports = {
plugins: [require("autoprefixer")]
};
06、js文件中引入使用import即可 ，css文件中引入必须使用@import才可以
--@import './other.css';
04、package.json文件中配置
01、package.json中配置scripts
--加入"bundle": "webpack"，之后就不用npx webpack 进行打包输出，可以使用命令npm run bundle可以实现打包
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline",
"bundle": "webpack"
},05、webpack.config.js中plugin
01、简单介绍
--可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念，换句话说就是扩展插件，在webpack构建流程的特定时机注入扩展逻辑来改变构建结果或做你想做的事情
02、HtmlWebpackPlugin使用
--打包结束后自动生成一个html文件，把打包生成的js模块引入到该html中
--安装插件npm i -D html-webpack-plugin
--在webpack.config.js文件导入
--const HtmlWebpackPlugin = require('html-webpack-plugin');
--module.exports = {}中除了entry/output/module/再添加一个plugins/代码如下，使用npm run bundle会发现dist中生成一个html文件
--plugins:[
new HtmlWebpackPlugin()
]
--配置new HtmlWebpackPlugin()中参数
--template: './index.html' //这个一般就是说把根目录下index.html加入到dist中
--title: 'liming' //设置html标题
--在html中设置<title><%= htmlWebpackPlugin.options.title %></title>
--filename: 'test_app.html', //设置输出到dist的html文件名称
1326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
