一、基础配置
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/