webpack3基础总结
## 1. 什么是webpack？
+ 前端人员的打包、压缩、测试的多方位为一体的工具。
## 2. 安装webpack 现在4.0版本以上的和3.几的版本不一样
+ cnpm i webpack@3.5.6 -g
+ webpack a.js b.js 会生成一个b.js
+ css 引入的需要转化
+ npm install style-loader css-loader
## 3. webpack.config.js 文件配置
module.exports = {
entry: "./js/a.js", // 入口文件
output: {
filename: "./js/b.js" // 输出文件
},
devtool: "source-map", // webpack 本身是没有js代码的需要配置
module: {
loader: [{
test: "\.css$/",
loader: 'style-loader!css-loader' //规则
}]
}
}
+ webpack -p 压缩
+ webpack -w 观察中--自动更新--需要刷新
+ webpack -d 调试模块 -- webpack 本身是没有js代码的需要配置
+ webpack -progress 告诉你每步在做什么
+ webpack -pwd 可以组合使用
## 4. 可以更改webpack.config.js的名称
+ webpack --config fly.js(自定义的名字)
+ webpack --config fly.js -dw // 还是可以组合使用的
## 5. 主页面也可以引用es6的
+ index.js -- import c from "./c.js"
++ `${c.a}+${c.b}`
+ c.js export default {
a: "10",
b: "20",
c: {}
}
## 6. 热更新不用刷新了
+ npm install webpack-dev-server -g
+ 方法一： webpack-dev-server --port 1207 // 配合webpack.config.js
+ 方法二： module.exports = {
entry: "./js/a.js", // 入口文件
output: {
filename: "./js/b.js" // 输出文件
},
devtool: "source-map", // webpack 本身是没有js代码的需要配置
devServer: {
port: 1207 // 配置热更新
},
module: {
loader: [{
test: "\.css$/",
loader: 'style-loader!css-loader' //规则
}]
}
}
运行要用 webpack-dev-server
+ 方法三：在package.json里面更改
"scripts": {
"dev": "webpack-dev-server"
}
运行命令: npm run dev
## 7. 图片引入
+ css中引入图片，背景图片，通过入口文件引入
- cnpm i url-loader // 图片和字体一般使用
- webpack.config.js中配置：
loader: [{
test: "\.css$/",
loader: 'style-loader!css-loader' //规则
}，{
test: "\.(jpg|jpeg|gif|png)$/i", // 忽略大小写
loader: 'url-loader?limit=4096&name=image/[hash:10].[ext]' //最大4M,10位哈希，最高32位
loader: 'url-loader?limit=4096&name=image/[name].[ext]' // 不使用哈希值，直接以自己名称命名
}]
+ html中直接引入图片 不能使用iamge中的图片
- cnpm i html-withimg-loader
- webpack.config.js中配置
loader: [{
test: "\.html$/",
loader: 'html-with-img-loader' //规则
}]
- 重新对html赋值,在入口文件进行修改
var html = require("./html");
document.body.innerHtml = html;
+ 中文网： www.css88.com/doc/webpack2/loaders/url-loader
## 8. 插件 plugins
+ cnpm i webpack
+ 在webpack.config.js中
- var webpack = require("webpack");
- plugins: [
new webpack.BannerPlugin("this is 表头注释"), //压缩的头注释，作者
]
+ 压缩html
- cnpm i html-webpack-plugin
- 在webpack.config.js中配置
var htmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
new htmlWebpackPlugin({
'template': "./index.html",
'filename'："./index.mim.html" // 在html中可以不用引用b
})
]
- webpack-dev-server/webpack 都可以
## 9. webpack结合bootstrap使用
+ 下载模板
- cnpm i style-loader css-loader html-withimg-loader webpack url-loader
+ 会有图标、字体的报错
- webpack.config.js css引入
- cnpm i file-loader
- loader: [{
test: "/\.(svg|ttf|woff|woff2)$/i",
loader: "url-loader?limit=4096&name=fonts/[hash:10].[ext]"
},{
test: "/\.eot$/i",
loader: "file-loader"
}]]
+ jquery 引入 全局的
- cnpm i jquery
- plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
