一、基础配置
1.创建一个名为demo-webpack的文件夹(名称随意)
//在cmd窗口中使用以下命令快速创建 npm init -y
3.安装webpack和webpack-cli到开发依赖下
npm i webpack -D npm i webpack-cli -D
4.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},5.创建入口文件src/index.js
6.运行npm run build命令测试打包是否正常 打包后将会自动创建dist/main.js文件，也就是默认的出口文件 (到这一步为止，目前的目录结构)
├─dist └─main.js ├─node_modules ├─src └─index.js ├─package.json └─package-lock.json
7.配置打包模式 在第6步的时候，你将会看到如下的警告：
这是因为我们还没有设置打包的模式，所以webpack默认以生产(production)模式完成打包
// 内容如下：打包模式分为两种development(开发模式打包) production生产模式打包 const config = { mode: "development" } // 这里可以直接导出上面的对象，但是使用变量保存可以使代码更美观 module.exports = config
配置完以上内容后再运行npm run build就会发现先前的警告信息消失了。
+ // 引入path模块处理路径问题
+ const path = require('path')
const config = {
mode: "development",
+ entry: "./src/index.js",
+ output: {
+ path: path.join(__dirname, './dist'),
+ filename: "main.js"
+ }
}
module.exports = config二、loader配置
通过以上的步骤就已经搭建了一个简单的webpack架子，然后让我们添加一个css文件来测试下打包
①在index.html中添加一些简单的结构
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./dist/main.js"></script> </body> </html>
②在src/styles/index.css添加一些简单的样式
body {
background-color: pink;
}③在index.js中引入css文件
import './styles/index.css'
④最后，运行npm run build打包，并得到如下报错信息
报错部分明确的告诉你'You may need an appropriate loader to handle this file type'
翻译过来大致就是：你或许需要一个适当的加载器来处理这个类型的文件
所以接下来我们需要下载用于解析CSS文件的loader
- 直接使用如下命令安装style-loader和css-loader
npm i style-loader css-loader -D
const config = { mode: "development", entry: "./src/index.js", output: { path: path.join(__dirname, './dist'), filename: "main.js" }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader' + ] + } + ] + } }
- 最后运行npm run build就可以打开根目录下的index.html文件预览一番了
操作如下：
①在src/assets文件夹下放入一张优美的图，这里放入的是pretty.png
<div id="app"> <img id="img" src="nothing.png" alt=""> </div>
import pic from './assets/pretty.png'
const img = document.getElementById('img')
img.src = './dist/' + pic;④运行npm run build打包，并得到如下报错
所以还是老套路，先下载加载器，然后在webpack中配置一下
①安装file-loader加载器
npm i file-loader -D
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.png$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}③运行npm run build就可以看到优美的图片了
PS:
- 如果这里你用的不是.png后缀的图片的话，需要在上面正则匹配(test: /\.png$/)中修改一下哈
- 因为webpack最初是用于打包js文件的，所以如果想要打包其它类型的文件都需要配置对应的loader
- 配置的方法和上面讲述的都大同小异，加载器在webpack官方也都有列出不少
- 地址：https://www.webpackjs.com/loaders/
