webpack4的基本配置
1、初始化项目
输入命令npm init -y
,就会在目录下生成一个package.json文件
2、安装webpack
全局安装:npm install webpack webpack-cli -g
本地安装:npm install webpack webpack-cli -D
3、创建文件夹,全局编译打包
webpack3.x下这么用:
创建src文件夹,在其文件夹下创建index.html、main.js
创建dist文件夹(可创可不创)
运行指令:
开发配置指令:webpack ./src/main.js -o ./dist/bundle.js --mode=development
生产配置指令:webpack ./src/main.js -o ./dist/bundle.js --mode=production
我使用的是开发配置命令,此时在dist文件夹下会生成一个bundle.js的文件
webpack4.x下这么用:
创建src文件夹,在其文件夹下创建index.html、index.js
创建dist文件夹
在webpack.config.js中加入代码
// 向外暴露一个打包的配置对象:因为webpack是基于node构建的,所以webpack支持所有Node的API和语法
module.exports = {
mode: 'development',
// 在webpack4.x中,有一个很大的特性,就是约定大于配置 约定,默认的打包入口路径是src->index.js
}
在终端输入 webpack
即可在dist文件夹下看到已经打包好的文件main.js
注意:webpack4.x提供了约定大于配置的概念,目的是为了尽量减少配置文件的体积
- 默认约定:
- 打包的入口是src --> index.js
- 打包的输出文件是dist --> main.js
4、自动打包
(1) 安装webpack-dev-server工具:cnpm i webpack-dev-server -D
(2) 在根目录下创建webpack.config.js配置文件,写入代码
// 由于webpack是基于node进行构建的,所以所有webpack的配置文件中,任何合法的node代码都是支持的
var path = require('path')
// 在内存中,根据指定的模板页面,生成一份内存中的首页,同时自动把打包好的bundle注入到页面底部
// 如果要配置插件,需要在导出的对象中,挂载一个plugin节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 当以命令行形式运行webpack或webpack-dev-server的时候,工具会发现,我们并没有提供要打包的文件入口
// 和出口文件,此时,他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件
output: { //指定输出选项
path: path.join(__dirname, './dist'), //输出路径
filename: 'bundle.js' //指定输出文件的名称
},
mode: 'development'
}
(3) 在package.json中的scripts下添加脚本,实现实时编译自动打开浏览器等功能
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
(6)通过plugin工具把bundle文件注入到文件的最底部,所以还安装此工具,并且需要在配置文件中导入该插件,代码在上面
plugins: [ //所有webpack插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), //指定模板文件路径
filename: 'index.html' //设置生成的内存页面名称
})
],
安装命令,作用是将页面放置内存中,避免耗损物理磁盘: cnpm i html-webpack-plugin -D
(5)输入命令npm run dev
,自动打开浏览器
5、打包css、less、scss文件
(1)在src中创建文件夹css,在其目录下创建index.css文件,写入代码
html,body{
padding: 0;
margin: 0;
background-color: cyan;
}
(2)在main.js中导入css路径,写入代码
import './css/index.css'
(3)保存的时候发现报错,提示我们需要提供合适的loader去处理文件类型
css文件所安装的loader命令:
cnpm i style-loader css-loader -D
less文件所安装的loader命令:
cnpm i less-loader less -D
scss文件所安装的loader命令:
cnpm i sass-loader node-sass -D
(版本太高会报错,我换成7.3.1版本)
npm install sass-loader@7.3.1 --save-dev
(4)在webpack.config.js中添加配置节点,写入代码:
module: { //配置所有第三方loader模块
rules: [ //第三方模块的匹配规则
{ test:/\.css$/, use: ['style-loader', 'css-loader'] }, //处理css文件的loader
{ test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{ test:/\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
(5)输入命令npm run dev
即可打开浏览器发现样式产生变化