Webpack
Webpack
安装webpack
初始化 : npm init -y
为了是安装更快可以使用淘宝镜像 : npm set registry https://registry.npm.taobao.org/
安装webpack
npm install webpack
npm install webpack-cli
或
npm install webpack webpack-cli -D | -S -g
-D 当安装工具包后,只在开发的时候使用,发布上线以后就会删除
-S 发布以后依然保留该模块
-g 全局安装
如果出现了版本不兼容的问题,需要使用固定的版本通过设置指定的版本进行安装软件:
npm install webpack@4.4.4 -D
如果使用的是12+版本出现了错误,可以指定版本:
npm install webpack@5.4.0版本
npm install webpack-cli@4.2.0版本
2.打包js案例
(1)、创建一个html文件
（2）、创建一个js文件
运行html文件的时候,出现报错:index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module因为浏览器并不兼容import引入模块的这种方法,所有我们要用到webpack打包
安装： npm install webpack webpack-cli -g
除了全局安装的方式外,需要使用修改配置文件的方式进行配置脚本启动修改“package.json”文件
保存退出 在dos命令下执行(cmd的黑窗口) npm run start
另外一种打包方式:
可以在封装的时候,做一些更详细的配置
1.在项目中创建一个配置文件 扩展名为 .js 需要在这个配置文件中写入配置代码
const path = require("path");
module.exports={
entry:path.join(__dirname,'./index.js'),
output:{
path:path.join(__dirname,"./dist"),
filename:'bundle.js'
}
}
在到packzge.json文件中添加新命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack ./index.js -o dist",
当指定nstar命令的时候,帮我们去执行配置文件 webpack --config 文件名
"nstart":"webpack --config webpack.config.js" ***********
},
4.热重载
代码修改后,立马就发生改变
1.热重载: webpack-dev-server
需要安装热重载
npm install webpack-dev-server -D
2.如何使用:
在配置文件中刚刚 webpack 改成 webpack-dev-server
"nstart":"webpack --config webpack.config.js"
改成
"nstart":"webpack-dev-server --config webpack.config.js --hot --port 1999"
--hot 热重载(自动更新)
--port 1999 监听端口
--open 自动打开浏览器
执行
npm run nstart
如果出现报错:Error: Cannot find module 'webpack-cli/bin/config-yargs'
可能是版本不兼容
需要安装老版本:
主要问题就是由于新版本的webpack-cli不兼容
1.卸载 npm uninstall webpack-cli
2.安装旧版本: npm install webpack-cli@3.3.12 -D
注意版本
如果已经通过热重载的方式运行了项目,在index.html中需要把script标签删除
需要走服务器去执行我们的代码
5.打包HTML
1.也需要安装新的东西
npm install html-webpack-plugin -D
2.修改配置文件 webpack.config.js
引入模块:
const HtmlWebpackPlugin = require("html-webpack-plugin");
加上:
//打包html配置
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,"./index.html"),
filename:"index.html"
})
]
需要删除index.html中的 script的引入代码,可以package配置文件中添加一个新的命令
"zou":"webpack --config webpack.config.js"
执行 npm run zou
此时webpack会自定把index.html 和index.js 关联到一起 生成一个新的index.html
6.CSS打包
1.安装 css-loader 和 style-loader
1.css-loader 软件 可以把css文件解析成webpack能看到的格式
2.style-loader 把打包好的css模块解析成css样式表
2.修改配置文件:
webpack.config.js
module:{
rules:[{
test:/.css$/,
use:['style-loader','css-loader']
}]
}
执行 npm run zou
7. html热更新
1.安装 raw-loader
npm install raw-loader -D
2.修改配置文件
module:{
rules:[{
test:/.css$/,
use:['style-loader','css-loader']
},
{
test:/.(htm|html)$/,
use:[
'raw-loader'
]
}]
}
3.在index.js文件中引入index.html文件
import './index.html'
4.执行热重载
