验证webpack是否能自动解决模块化依赖问题 可以
1.在src目录下创建MVC3个模块，每个模块里面创建js文件，
view模块里面代码：const tpl={
template："<h3>火云邪神</h3>"
}
module.exports=tpl
model模块里面代码：const viewtpl=require(' ../view/index.js')
const data={
"name":"viewtpl.template",
}
module.exports=data
controller模块代码：var modle=require('../model/index.js')
const index={
fn() {
document.body.innerHTML=modle.name
}
}
module.exports=index
入口文件代码：var controller=require('../src/controller/indext.js')
controller.fn()
出口目录的html文件引入出口文件，运行npm rundev页面就显示火云邪神。
loader 转换器 可以将其他类型文件转换为我们想要的类型文件
1.在src目录创建assets文件夹-->stylew文件夹-->body.css
文件代码：body{
background：red
}
2.在入口文件引入bod.css文件
3.安装转换器：npm i css-loader style-loader -D如果报错就全局安装
4.在config.dev.js文件里配置：
module: { //这里用来存放转换器的配置
rules: [
// {} //每一个对象就是一个转换器的配置
{//css的处理
test: /\.css$/, // 整个项目下匹配 .css结尾的文件
use: ['style-loader','css-loader'] //两个顺序是不写反的，后面先执行
// 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
}
]
},
5.运行命令npm run dev
配置前端静态服务器
1.安装：npm install webpack-dev-server -g | -D
2.在config.dev.js文件里配置：
devServer: {//和module同级
port: 8088,
open:true
}
3.修改package.json:
"start":"npm run dev &webpack-dev-server --config config/webpack.config.dev.js",
"dev":"webpack --config config/webpack.config.dev.js"
4.运行npm run start
优雅降级配置
1.安装:cnpm install [email protected] @babel/core @babel/preset-env -D
2.在config.dev.js文件module里配置：
{// 配置优雅降级
test: /\.js$/,
exclude: /node_modules/, // 排除node_models中的js文件
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
}
4.运行命令npm run dev
html产出 - 依赖的是插件
1.在webpack目录下创建public目录，在此目录下创建index.js文件
2.安装:npm i html-webpack-plugin -D
3.在config.dev.js文件里配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
//添加一个配置项
plugins:[//与module同级
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',//默认到output目录
hash:true,//防止缓存,会给文件后面加入hash
minify:{
removeAttributeQuotes:true//压缩 去掉引号
}
})
]
4.运行命令npm run dev
css抽离 - 依赖的是插件
1.安装:npm i extract-text-webpack-plugin@next -D
2.在config.dev.js文件里配置：
const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
//loader配置：
use: ExtractTextWebapckPlugin.extract({
use: 'css-loader'
}) //不再需要style-loader
//pulgin配置
new ExtractTextWebapckPlugin('css/[name][hash:6].css')
3.运行命令npm run dev
图片打包
1.安装：npm I url-loader file-loader --save-dev
2.在config.dev.js文件module里配置：
{
test:/\.(png|jpg|gif)/,
use:[{
loader: 'url-loader',
options: {
limit: 5000,//字节少于5000 ——》 base64 超过5000 file
outputPath: 'images/', //5000意思存到images
}
}]
}
3.运行命令npm run dev
静态资源拷贝
1.安装：npm i copy-webpack-plugin -D
2.在config.dev.js文件里配置：
const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
new CopyWebpackPlugin([
{ from: path.resolve(__dirname,'../public'), to: path.resolve(__dirname,'../build') }
])
3.运行命令npm run dev
错误资源定制
// 在webpack.config.js中添加如下配置项：
devtool: 'source-map' //与module同级
制定报错信息的源
后缀名省略
1.在config.dev.js文件里配置：
resolve：{//与module同级
extensions:[ '.js','.css','.json'.'.jsx']
}
require（'./style'）//可以省略后缀名