webpack 继续上一篇博客
1.webpack devServe
所以需要下载npm i webpack-dev-server -D
由于改变代码但是没有重新打包,如果重新更改代码,希望看到一个热更新的效果,所以有了webpack的devServe来自动打包,需要我们在webpack.config.js中去配置
devServer:{
// 项目构建后的路径
contentBase:resolve(__dirname,'js/built.js'),
// 启动gzip压缩,使代码体积更小运行速度更快
compress:true,
// 端口号
port:3000,
// 自动打开浏览器
open:true
}
启动devServer指令为:npx webpack serve
这篇博客为修改理由
2.开发环境基本配置
const {
resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Template } = require('webpack');
//resolve用来拼接绝对路径的方法
module.exports = {
//webpack配置
//入口文件 因为划分了目录结构,所以就是js文件夹下
entry: "./src/js/index.js",
// 输出
output: {
// 输出文件名
// 但是希望src打包之后也有原来的结构,所以需要进行改动
// 将main.js改动成js/main.js
filename: 'js/main.js',
// 输出路径
// __dirname nodejs变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build/build.js'),
publicPath: './',
},
module: {
rules: [
//详细的node配置
// 不同文件必须配置不同loader处理
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 并且不能复用
'less-loader'
],
},
{
//匹配哪些文件
test: /\.css$/,
use: [
// use数组loader执行顺序,从下到上,从左到右,依次执行
//创建style标签,将js中的样式资源插入进行中,添加到head中
'style-loader',
// 将css文件中变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
],
},
{
test:/\.(jpg|png|gif)$/,
// 如果使用use就是使用多个loader,但是我们这里就需要使用一个loader
loader:'url-loader',
// 需要下载url-loader和file-loader,因为url-loader依赖于file-loader
options:{
// 图片大小小于8kb,就会被base64处理,就直接打包成base64的处理,直接在页面显示
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大,文件请求会更慢一点
limit:8*1024,
// 问题:因为url-loader默任使用es6模块化解析,而html-loader引入图片是commenjs,所以解析时会报错
// 解决:关闭url-loader的es6模块化,使用commonjs解析
// esModule:false,
// [hash:10]去图片的hash的前十位
// [ext]取文件原来扩展名
// 将名字变小
name:'[hash:10].[ext]',
outputPath:'imgs'
}
},
{
test:/\.html$/,
// html-loader是处理html文件的img图片的(负责引入img。从而能被url-loader进行处理)
loader:'html-loader'
},
// 打包其他资源,就是除了css,html,js的资源
{
exclude:/\.(css|js|html|less|jpg|png|gif)/,
loader:'url-loader',
options:{
outputPath:'media'
}
}
]
},
//插件的配置
plugins:
[
//详细的plugins配置
//html-webpack-plugin,引入html的plugin插件
// 插件需要引入
new HtmlWebpackPlugin(
{
//复制 ./src/index.html文件,并自动打包输出所有资源
template:'./src/index.html'
},
)
],
mode: 'development',
// 开发服务器
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为:webpack-dev-server
devServer:{
// 项目构建后的路径
contentBase:resolve(__dirname,'build/build.js'),
// 启动gzip压缩,使代码体积更小运行速度更快
compress:true,
// 端口号
port:3000,
// 自动打开浏览器
open:true
}
}
webpack 会将打包结果输出出去
npx webpack serve 只会在内存中打包,没有输出
划分项目结构
将src中目录结构中因为css会先转化成js,所以就没有生成对应的css文件,因为已经引入到js中了,为了让项目结构更加清晰,所以可以指定每个打包文件的输出路径
例如
{ exclude:/\.(css|js|html|less|jpg|png|gif)/, loader:'url-loader', options:{ outputPath:'media' } }
在options里配置打包输出路径
项目结构如下
3.构建环境基本配置
development 能让代码本地调试运行的环境
production 让代码优化上线,代码压缩
4.css文件提取成单独文件
对生产环境搭建的第一步,对样式的处理
就是如上说过因为css会引入到js中,所以如果想要将css单独提取出来,就得下载插件 npm i mini-css-extract-plugin -D 可以将css提取到单独文件
所以需要在plugin的时候对插件做出相应的配置,在webpack.config.js中
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin(
{
// 打包好的输出的css
filename:'css/built.css'
}
)
],
module: {
rules: [{
test: /\.css$/,
use: [
// 创建style标签
// 'style-loader',
// 取代style-loader,提取css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}],
},
5.css兼容性处理
对css进行兼容性处理,需要postcss —>postcss-loader postcss-preset-env 识别浏览器
运行 npm i postcss-loader postcss-preset-env -D
默认是生产环境,如果要改动成开发环境,得设置环境变量 设置node环境变量:process.env.NODE_ENV = development
所以我们需要设置node.js的环境变量,在webpack.config.js中
process.env.NODE_ENV = development
在package.json中写入
"browserslist":{
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
}
在css兼容性处理我这里报了一些错,暂时没找到解决办法。但是不看css兼容性处理的部分,还是可以正常运行的。
加油,一次解决css兼容性问题,继续webpack之旅