使用webpack打包jshtmlcssless，以及其他文件

确保下载了node/webpack

首先需要已经安装了node可以使用npm，若还没可以前往百度搜索npm的安装方法

初始化package.json

npm init

下载并安装webpack

npm install webpack webpack-cli -g npm install webpack webpack-cli -D

简单的打包方法

创建一个空的build文件与src同级，之后在src里面写文件，但是这种办法只能打包js与json，其他文件无法打包 这里定于index.js为入口文件，输入指令，意思就是将src下面的index.js打包到build下面生成一个文件名为built.js的文件，两个指令都可以使用，但生产环境会多一个压缩代码的功能

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development 生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production 功能：在开发配置功能上多一个功能，压缩代码。

webpack开发环境的基本配置

首先在目录下创建webpack.config.js文件 只需要不同文件必须配置不同loader处理，使用前要记得安装，里面步骤也写得很详细，里面步骤也写得很详细，运行指令也只需要输入webpack

npm i css-loader style-loader less-loader less -D /* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */ // resolve用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { // webpack配置 // 入口起点 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' }

打包htm文件

在src中创建一个index.html文件 之后下载安装 plugin 包

npm install --save-dev html-webpack-plugin

修改配置文件，记得定义const HtmlWebpackPlugin = require(‘html-webpack-plugin’); 之后执行运行指令webpack

/* 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的配置 // html-webpack-plugin // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS） // 需求：需要有结构的HTML文件 new HtmlWebpackPlugin({ // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS） template: './src/index.html' }) ], mode: 'development' };

打包图片资源

下载安装 loader 包 npm install --save-dev html-loader url-loader file-loader 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'] }, { // 问题：默认处理不了html中img图片 // 处理图片资源 test: /\.(jpg|png|gif)$/, // 使用一个loader // 下载 url-loader file-loader 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' };

打包其他文件

更改的地方也很少，就只需要

{ // 排除css/js/html/less资源 exclude: /\.(css|js|html|less)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]' } } //const HtmlWebpackPlugin = require('html-webpack-plugin') 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/less资源 exclude: /\.(css|js|html|less)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' };

大致都相同，只需要注意一些rules里的不同

webpack打包出错？

上网搜索之后告诉你执行指令npm i webpack -g，但我执行后没有效果 之后发现是我自己忘记引入各种包了，检查一下自己有没有这三种东西