转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack开发环境基本配置
直接上
webpack的配置文件webpack.config.js
这里增加了自定义js、imgs、media等目录。
各类型资源的配置说明参见后续相关章节。
# 需要用npm安装的依赖包
> npm i webpack@4.41.6 webpack-cli@3.3.11 -D
> npm i style-loader@1.1.3 css-loader@3.4.2 less-loader@5.0.0 less@3.11.1 html-webpack-plugin@3.2.0 file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 file-loader@5.0.2 url-loader@3.0.0 html-loader@0.5.5 -D
/*
开发环境配置，能让代码运行。
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
loader: 1.下载 2.使用(配置loader)
plugins: 1.下载2. 引入 3.使用
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/js/index.js',
// 输出
output: {
// 输出文件名
filename: 'js/built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
// 打包 css 文件的详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-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]',
// 设置输出目录，将打包的图片资源放到imgs文件夹
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
options:
{
// 默认情况下,生成使用ES块语法的Js模块
// 问题:生成的图片显示错误
// 解决: esModule改为false
esModule: false,
},
},
{
// 打包其他资源(除了html/js/css资源以外的资源)
// 排除css/is/html资源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 给资源进行重命名
// [hash:10]取资源的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10]. [ext]',
// 设置输出目录，将打包的其他资源放到media 文件夹
outputPath: './media',
},
},
],
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
}),
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
// 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为: npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
},
};