有站点地图的网站,wordpress快速赚钱,如何制作简单网站,做网站是怎么做的webpack主要构成部分#xff1a;
entry 入口output 出口loaders 转化器plugins 插件mode 模式devServer 开发服务器
webpack.config.js 配置文件基本格式
module.exports{//入口文件entry:{},//出口文件output:{},//module rules loadersmodule{};//插件plugins:[],//开发…webpack主要构成部分
entry 入口output 出口loaders 转化器plugins 插件mode 模式devServer 开发服务器
webpack.config.js 配置文件基本格式
module.exports{//入口文件entry:{},//出口文件output:{},//module rules loadersmodule{};//插件plugins:[],//开发服务器devServer:{},//模式mode: ,
};详细讲解
一入口Entry告诉 webpack 应该使用哪个模块来作为构建整个项目的开始二出口Output告诉 webpack 在哪里输出它所创建的 bundle以及如何命名这些文件
1、单文件入口语法 用法entry: string | [string]
const path require(path);
module.exports {entry: ./src/index.js ,output:{path:path.resolve(__dirname, dist),filename:bundle.js}
};2、多入口单出口文件的配置
const path require(path);
module.exports {
entry:[./src/index.js,./src/index2.js], //按照先后顺序一起打包 bundle.js
output:{path:path.resolve(__dirname, dist),filename:bundle.js}
};3、多入口多出口文件的配置
const path require(path);module.exports {entry:{index:./src/index.js,index2:./src/index2.js},output:{path:path.resolve(__dirname, dist),filename:[name].bundle.js}};还需要在index.html文件引入js文件的时候内容改一下。这种方法引入比较繁琐后面可以使用插件来完成这个功能。
三.加载器Loaderwebpack 只能理解 JS 和 JSON 文件loader 让 webpack 能够去处理其他类型的文件并将它们转换为有效模块以供应用程序使用。 例如css-loader | html-loader
1、处理css文件
1安装loadernpm i style-loader css-loader -D 2配置文件里的写法
module:{rules:[{test:/\.css$/,use:[style-loader,css-loader] //注意先写style-loader再写css-loader}]}3然后执行webpack命令。
2、处理less文件
1安装loadernpm i style-loader css-loader less-loader -D //如果装过style-loader css-loader这里可以不用写这两个loader 2配置文件里的写法 module:{rules:[{test:/\.less$/,use:[style-loader,css-loader,less-loader] //注意先写style-loader再写css-loader}]
}3然后执行webpack命令。
3、处理sass文件
1安装loadernpm i style-loader css-loader sass-loader -D //如果装过style-loader css-loader这里可以不用写这两个loader 2配置文件里的写法 module:{rules:[{test:/\.s[a,c]ss$/,use:[style-loader,css-loader,sass-loader] //注意先写style-loader再写css-loader}]}3然后执行webpack命令。
注意如果上面的操作中如安装less的时候报错Vue安装loader报错Syntax Error: Error: Cannot find module ‘less‘ 类似的信息解决方法是重新安装这个loader时版本号就可以了例如npm i less-loader6 -D就可以了。
4、处理图片资源
在webpack5中处理图片资源不用安装loader了,直接在配置文件中设置图片属性内容。
// 图片加载器
module: {rules: [{test: /\.(png|jpe?g|gif|webp|svg)$/,type: asset,parser: {dataUrlCondition: {// 小于10KB图片会转base64, 优点:减少请求数量 缺点:体积变大maxSize: 15 * 1024 // 4kb}},//设置图片打包后的图片路径generator: {// 输出图片名字filename: static/images/[hash:10][ext][query] //[hash:10] 表示hash值只取10位}}]
},5、处理字体图标资源
前面省去了将字体图标引入文件的步骤。直接展示配置文件设置内容
module: {rules: [// 图标{test: /\.(ttf|woff2?)$/,type: asset/resource, generator: {// 输出名字filename: static/media/[hash:10][ext][query] //注意实际设置的路径}}]
},安装babel-loder 用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法。
1下载包管理工具 npm i babel-loader babel/core babel/preset-env -D2定义 Babel 配置文件babel.config.js
module.exports {presets: [babel/preset-env],
};presets 预设就是一组 Babel 插件, 扩展 Babel 功能
babel/preset-env: 一个智能预设允许您使用最新的 JavaScript。babel/preset-react一个用来编译 React jsx 语法的预设babel/preset-typescript一个用来编译 TypeScript 语法的预设
3配置webpack.config.js
module: {rules: [// 图标{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},]
},处理其他资源如音/视频等等
module: {rules: [{test: /\.(map3|map4|avi)$/, //在这里加上就可以统一处理type: asset/resource,generator: {// 输出名字filename: static/media/[hash:10][ext][query] }]四.插件Plugins插件是 webpack 的支柱功能能够执行范围更广的任务包括打包优化、压缩、重新定义环境中的变量等 例如html-webpack-plugin
1、eslint语法检查
在webpack5中eslint语法检查是个插件它的实现步骤是 1下载安装包 npm i eslint-webpack-plugin eslint -D
2定义 Eslint 配置文件 在文件目录下新建.eslintrc.js文件配置如下内容
module.exports {// 继承 Eslint 规则extends: [eslint:recommended],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6,sourceType: module,},rules: {no-var: 2, // 不能使用 var 定义变量},
};
更多规则详见[规则文档](https://eslint.bootcss.com/docs/rules/)(3)在webpack.config.js文件中配置
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [ {// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},]
}
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),],mode: development,
}4修改 js 文件代码 main.js文件
import count from ./js/count;
import sum from ./js/sum;
// 引入资源Webpack才会对其打包
import ./css/iconfont.css;
import ./css/index.css;var result1 count(2, 1);
console.log(result1);
var result2 sum(1, 2, 3, 4);
console.log(result2);5用webpack打包生成会发现报错了原因是main.js中不应该用var定义变量按照.eslintrc.js定义的规则中是不能用var 定义变量的所以改成const后打包就不会报错了。
五.模式Mode development优化打包速度提供调试的辅助功能开发 production优化打包结果打包之后代码的运行效率和性能优化生产 none最原始的打包
六.devServer用于快速开发应用程序热重载 devServer: {}
开发服务器自动化 1、下载安装包 npm i webpack-dev-server -D2、配置webpack.config.js
module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [ // 开发服务器devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: development,
};3、运行指令
npx webpack serve
