创建配置文件
-
创建文件 webpack.config.js
-
配置内容如下
// node 内置核心模块，用来处理路径问题 // resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { // 入口起点 entry: './src/js/index.js', // 输出 output: { // 输出文件名 filename: './built.js', // 输出路径 // __dirname nodejs 的变量，代表当前文件的目录绝对路径 path: resolve(__dirname, 'build/js') }, // 模式 mode: 'development' // mode: 'production' } -
运行指令：webpack
-
结论：此时功能与上节一致
打包样式资源
-
创建 css、less 文件
-
下载安装 loader 包
npm i css-loader style-loader less-loader less -D -
修改配置文件
// resolve用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { entry: './src/index.js', output: { // 输出文件名 filename: 'built.js', // 输出路径 // __dirname nodejs的变量，代表当前文件的目录绝对路径 path: resolve(__dirname, 'build') }, // loader的配置 module: { rules: [ // 详细loader配置 // 不同的文件必须配置不同的loader处理 { // 匹配哪些文件 test: /\.css$/, // 使用哪些loader进行处理 use: [ // use数组中loader执行顺序，从右往左，从下到上 依次执行 // 创建一个style标签，将js中的样式资源插入进行，添加到head中生效 'style-loader', // 将css文件变成commonjs模块加载js中，里面内容是样式字符串 'css-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', // 将less文件编译为css文件 // 需要下载 less-loader 和 less 'less-loader' ] } ] }, // plugins的配置 plugins: [ // 详细plugins的配置 ], // 模式 mode: 'development' // mode: 'production' } -
运行指令：webpack
打包 HTML 资源
-
创建 html 文件
-
下载安装 plugin 包
npm i html-webpack-plugin -D -
修改配置文件
/** * loader: 1.下载 2.使用（配置loader） * plugins: 1.下载 2.引入 3.使用 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader 的配置 ] }, plugins: [ // plugins 的配置 new HtmlWebpackPlugin({ // 复制 ./src/index.html 文件，并自动引入打包输出的所有资源（js/css） template: './src/index.html' }) ], mode: 'development' } -
运行指令：webpack
打包图片资源
-
创建 png、jpg 文件
-
下载安装 loader 包
npm i html-loader url-loader file-loader -D -
修改配置文件
const { resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.less$/, // 要使用多个 loader 处理时用 use use: ['style-loader', 'css-loader', 'less-loader'] }, { // 处理图片资源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点：减少请求数量（减轻服务器压力） // 缺点：图片体积会更大（文件请求速度更慢） limit: 8 * 1024, // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs // 解析时会出问题：[object Module] // 解决：关闭url-loader的es6模块化，使用commonjs解析 esModule: false, // 给图片进行重命名 // [hash:10]取图片的hash的前10位 // [ext]取文件原来扩展名 name: '[hash:10].[ext]' } }, { test: /\.html$/, // 处理 Html 文件中的 img 图片（负责引入 img，从而能被 url-loader 进行处理） loader: 'html-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' }; -
运行指令：webpack
打包其他资源
-
创建 ttf、woff、svg、eot 等文件
-
修改配置文件
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 打包其他资源(除了html/js/css资源以外的资源) { // 排除css/js/html资源 exclude: /\.(css|js|html|less)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' }; -
运行指令：webpack
devserver
-
下载 webpack-dev-server
npm i webpack-dev-server-D -
修改配置文件
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 打包其他资源(除了html/js/css资源以外的资源) { // 排除css/js/html资源 exclude: /\.(css|js|html|less)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动 devServer 指令为：npx webpack-dev-server devServer: { // 项目构建后路径 contentBase: resolve(__dirname, 'build'), // 启动gzip压缩 compress: true, // 端口号 port: 3000, // 自动打开浏览器 open: true } }; -
运行指令：npx webpack-dev-server
开发环境配置汇总
-
创建文件
-
编辑配置文件
/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { // 处理less资源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 处理css资源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 处理图片资源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, outputPath: 'imgs' } }, { // 处理html中img资源 test: /\.html$/, loader: 'html-loader' }, { // 处理其他资源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } }; -
运行指令：npx webpack-dev-server
相关文章
如果您觉得这篇文章对您有帮助，欢迎为我的 github项目 点一个⭐