webpack
官方：
https://webpack.js.org/
http://webpack.github.io/
中文：
资料：
https://segmentfault.com/a/1190000006178770
学习入口：
官网----->1 中文文档-->指南
2 立即开始
安装webpack:
1、3.x
安装 cnpm i -D webpack@3.8.1
卸载 npm un -D webpack
2、4.x
安装 cnpm i -D webpack webpack-cli
局部安装验证版本：
webpack -v 错误 —— 全局安装
1、node_modules/.bin/webpack -v
2、npx webpack -v
3、工程文件 package.json
"scripts": {
"test": "webpack -v"
},
运行npm run test
webpack3 翻译器 ES6-->ES5 babel
webpack src dist
npx webpack js/index.js dist/index.bundle.js
文件不会被压缩！
webpack4 翻译器 ES6-->ES5 babel
webpack --mode=development src -o dist 正确的格式
npx webpack --mode=development js/index.js dist/index.bundle.js --->main.js
npx webpack --mode=development js/index.js --output dist/index.bundle.js
文件会被压缩！
简写:webpack --mode=development
前提条件：
1、源src 必须是 src/index.js
输出： 默认 dist/main.js
配置文件： webpack.config.js
执行：webpack
指定执行某一个具体的文件： 必须带上 --config
webpack --config webpack.dev.config.js
loader:处理资源 从右往左进行处理
cnpm i -D style-loader css-loader
css-loader：加载css文件
style-loader：处理样式 页面生成style标签
sass:
cnpm i -D sass-loader node-sass
less:
cnpm i -D less-loader less
cnpm i -D url-loader file-loader
file-loader：处理文件 单纯的把文件复制到目标路径 重命名
url-loader 依赖 file-loader :把文件转成base64
exp:
module.exports = {
mode:"development",
entry:"./src/index.js", //引入模块 ./
output:{
path:`${__dirname}/dist/`, //必须是一个绝对路径
filename:"index.bundle.js"
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader','css-loader']
},
//sass
{
test: /.scss$/,
use: ['style-loader','css-loader','sass-loader']
},
//less
{
test: /.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /.(png|jp(e)?g|gif)$/,
use: ["url-loader"]
}
]
}
}
model:{ 模块、包
rules:[ //规则
{test:/正则/，use:[xxxx-loader]} use:使用什么
loader进行处理
]
}
indes.js
import $ from "jquery";
import "./asset/1.css";
import img from "./asset/111.jpg"
$(function(){
$("#div1").click(function(){
//$(this).addClass("active");
// alert(img);
$(this).css({
"330px",
height:"495px",
background:`url(${img})`
});
});
});
res:
生成页面 index.html
cnpm i -D html-webpack-plugin
new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
//title: 'My App',
template: 'public/index.html',用户模板文件
filename: 'index.html', 生成的页面 可以不写 默认就是index.html
hash:true 防止js/css缓存
})
ExtractTextWebpackPlugin 在 webpack4中被废弃 替换者 mini-css-extract-plugin
cnpm i -D mini-css-extract-plugin
mini-css-extract-plugin++应用场景只在开发阶段++！
++在生产阶段换成 style++
--watch 简写 -w 实时编译 问题 不能主动刷新页面
webpack-dev-server 服务器
不能实时编译，可以实时刷新页面
cnpm i -D webpack-dev-server
webpack.config.js
const webpack = require('webpack');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// webpack --mode=development src/index.js --output dist/main.js
module.exports = {
mode:"development",
entry:"./src/index.js",//模块 ./
output:{
path:path.resolve(__dirname,"dist"),//绝对路径
filename:"main.js"
},
devServer: {
contentBase: "./dist", //资源目录 www/public
index: 'main.js',
host:"localhost",
port:9000,
open:true,// --open
hot: true,
compress: true, //gzip压缩
// proxy: {
// '/api': {
// target: 'https://other-server.example.com',
// secure: false
// }
// }
},
module: {
rules: [
// { test: /.css$/, use: ["style-loader","css-loader"] },
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{ test: /.(png|jp(e)?g|gif|svg|icon)$/,use: ["file-loader"] },
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.BannerPlugin('版权所有，翻版必究'),
//new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
template: 'public/index.html',
filename: 'index.html',
hash:true
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
css/url/file/babel/vue-loader
css分离（mini-css-extract-plugin）
HtmlWebpackPlugin
HtmlWebpackPlugin —— Clean...
babel