webpack常用配置以及如何用webpack对项目进行打包
1.创建webpack项目并对项目进行打包
步骤：
1.npm init
2.安装依赖（前两个ts依赖根据需要，不用ts可不安）
"devDependencies": {
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
}
3.编写webpack的配置文件
//引入一个包，“path”:nodejs里面的一个模块,作用是用来拼接路径
const path = require("path");
//webpack中所有的信息，都应该写在module.exports里
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在的目录
output: {
//指定打包文件的目录
// path:"./dist"
path: path.resolve(__dirname, "dist"),
//打包文件的名字
filename: "bundle.js",
},
//指定webpack打包时要使用的模块
module: {
//因为项目里面有许多不同的文件，比如js，ts，图片deng，所以要指定加载的规则
rules: [
{
//test指定的是规则生效的文件
test: /\.ts$/, //表示所有以ts结尾的文件
//要使用的加载插件
use: "ts-loader",
//要排除的文件
exclude: /node-modules/,
},
],
},
};
4.编写ts的配置文件(若项目中没有ts则跳过此步)
{
"compilerOption": {
//编译器的选项，最重要的属性
"strict": true,
"target": "ES5", //转化成哪个版本的js代码 可选值： 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
"outDir": "./js", //表示ts文件最终编译为js文件，js文件存放的位置
"module": "", //指定要使用的模块化规范 可选值： 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'
"allowJs": false, //是否对js文件进行编译，默认是false，通常和checkJs配套使用
"checkJs": false, //是否对js文件规范进行ts规范的检查
"removeComments": false, //是否移除注释
"noEmit": false, //不生成编译后的文件 可以和noEmitOnError配套使用
"noEmitOnError": false, //当有错误时不生成编译后的文件
"alwaysStrict": true, //用来指定编译后的文件是否使用严格模式
"noImplicitAny": false, //是否不允许出现隐式any
"noImplicitThis": false //是否不允许出现隐式this
}
}
5.添加package.json打包指令
//"build":"webpack"
"build": "webpack build --mode production",
2-1.webpack的一些常用配置
1.安装依赖
"devDependencies": {
"html-webpack-plugin": "^5.5.3", //该插件可以用来配置打包的index.html (常用)
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1", //可以位电脑配置一个内置的服务器，用来实时查看代码改变后的打包页面
"clean-webpack-plugin": "^4.0.0",//可以再打包前，清除dist文件里上次打包的内容，防止新旧代码冲突
}
2.配置webpack
//引入生成html的插件（html-webpack-plugin）
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//配置webpack的插件
plugins: [
new HTMLWebpackPlugin(
(options = {
// title: "自定义title",
template: "./index.html",
})
),
new CleanWebpackPlugin(),
],
//用来设置哪些模块是可以引入的，如果不设置，引入文件打包时会报错
resolve: {
//凡是以extensions里面的元素当作扩展名的文件，都可以作为模块使用
extensions: [".ts", ".js"], //扩展名越靠前，优先级越高
},
}
3.配置package.json
"scripts": {
"dev": "webpack --mode development",
"build": "webpack build --mode production",
"start": "webpack serve --open chrome.exe" //npm start命令自动开启打包文件的html网页，并可对项目开发文件进行实时监听
},
2-2. babel插件配置（开发必选可以与webpack配合使用）
babel的作用
1.可以把新语法转成旧语法
2.可以把新的技术（promise，proxy。。。）在一些浏览器不支持的可以让浏览器支持
总之，为了让代码有更好的兼容性，在不同的浏览器都能去使用
步骤
1.安装依赖
npm i -D @babel/core @babel/preset-env babel-loader core-js
插件介绍：
@babel/core：babel的核心@babel/preset-env：预先设置的环境。因为我们写的代码可能要兼容IE，谷歌，火狐。。。各种各样的浏览器。这个插件就给我们预制了不同的环境，你是什么环境，就给你转化成什么样的代码
@babel-loader：让babel和webpack进行结合的工具
core-js：使老的浏览器可以用到新的技术。里面包含的东西比较多，用的时候不需要把所有的东西都加载出来
2.配置webpack.json
{ output: { //指定打包文件的目录 // path:"./dist" path: path.resolve(__dirname, "dist"), //打包文件的名字 filename: "bundle.js", //配置打包的环境 environment:{ //告诉webpack打包时在bundle.js全局自调用函数用普通函数代替箭头函数（兼容IE低版本） arrowFunction:false } }, module:{ rules:[ { { //test指定的是规则生效的文件 test: /\.ts$/, //表示所有以ts结尾的文件 //要使用的加载插件,此处用了两个加载器（babel-loader，ts-loader）谁在前谁优先级高 use: [ // 配置babel { //指定加载器 loader: "babel-loader", //设置babel options: { //设置预定义的环境 presets: [ [ //指定环境的插件 "@babel/preset-env", //配置信息 { //指定要兼容的浏览器 targets: { "chrome":"88",//谷歌浏览器88版本 "ie":"11" }, "corejs":"3",//用哪个版本的core-js //使用corejs的方式，“usage”表示按需加载 "useBuiltIns":"usage" }, ], ], }, }, "ts-loader", ], //要排除的文件 exclude: /node-modules/, }, } ] } }
3.完整的webpack.config.js
//引入一个包，“path”:nodejs里面的一个模块,作用是用来拼接路径
const path = require("path");
//引入生成html的插件（html-webpack-plugin）
const HTMLWebpackPlugin = require("html-webpack-plugin");
//再打包前，清楚dist文件里上次打包的内容，防止新旧代码冲突
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//webpack中所有的信息，都应该写在module.exports里
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在的目录
output: {
//指定打包文件的目录
// path:"./dist"
path: path.resolve(__dirname, "dist"),
//打包文件的名字
filename: "bundle.js",
//配置打包的环境
environment:{
//告诉webpack打包时在bundle.js全局自调用函数用普通函数代替箭头函数（兼容IE低版本）
arrowFunction:false
}
},
//指定webpack打包时要使用的模块
module: {
//因为项目里面有许多不同的文件，比如js，ts，图片deng，所以要指定加载的规则
rules: [
{
//test指定的是规则生效的文件
test: /\.ts$/, //表示所有以ts结尾的文件
//要使用的加载插件,此处用了两个加载器（babel-loader，ts-loader）谁在前谁优先级高
use: [
// 配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境的插件
"@babel/preset-env",
//配置信息
{
//指定要兼容的浏览器
targets: {
"chrome":"88",//谷歌浏览器88版本
"ie":"11"
},
"corejs":"3",//用哪个版本的core-js
//使用corejs的方式，“usage”表示按需加载
"useBuiltIns":"usage"
},
],
],
},
},
"ts-loader",
],
//要排除的文件
exclude: /node-modules/,
},
],
},
//配置webpack的插件
plugins: [
new HTMLWebpackPlugin(
(options = {
// title: "自定义title",
template: "./index.html",
})
),
new CleanWebpackPlugin(),
],
//用来设置哪些模块是可以引入的，如果不设置，引入文件打包时会报错
resolve: {
//凡是以extensions里面的元素当作扩展名的文件，都可以作为模块使用
extensions: [".ts", ".js"], //扩展名越靠前，优先级越高
},
};
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
