webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，
其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
它通常适用于单页面SPA应用，通常以一个js文件为入口文件，在入口文件中引入其它css和js文件，最后把入口文件和其引入的文件，打包成为一个js出口文件。
-------- Lesson1 入口文件和出口文件 --------
初始化项目:
npm init -y
安装webpack:
cnpm install webpack --save-dev
新建webpack的配置文件webpack.config.js :
单个入口/出口文件时的配置实例：
const path = require("path");
module.exports = {
entry : {
one : "./src/assets/js/build.js"
},
output : {
path : path.resolve(__dirname, "dist"),
filename : "output.js"
},
module : {},
plugins : [],
devServer : {}
};
多个入口/出口文件时的配置实例：
const path = require("path");
module.exports = {
entry : {
one : "./src/assets/js/one.js",
two : "./src/assets/js/two.js"
},
output : {
path : path.resolve(__dirname, "dist"),
filename : "[name].js"
},
module : {},
plugins : [],
devServer : {}
};
注意项目文件夹结构：
源代码：
src
assets
css
images
js
build.js
tool.js
index.html
目标代码：(webpack压缩处理后供页面引用的代码)
dist
注意模块化js的写法：
---build.js文件内容---：
var sayHi = require("./tool").sayHi;
document.getElementById("title").innerHTML = "Hi webpack!";
setTimeout(function () { sayHi(); },1000);
---tool.js文件内容---：
module.exports = {
sayHi : function (a,b) {
alert("Hi,你好呀！");
}
};
在终端中执行命令 webpack，则打包完成。
-------- Lesson2 webpack-dev-server --------
webpack-dev-server默认已经安装在webpack内，用于开发中实时刷新页面
在webpack.config.js中配置devServer和publicPath:
const path = require("path");
module.exports = {
entry : {
one : "./src/assets/js/build.js"
},
output : {
path : path.resolve(__dirname, "dist"),
filename : "output.js",
publicPath : "/temp/"
},
module : {},
plugins : [],
devServer : {
contentBase : path.resolve(__dirname, "./"),
host : "localhost",
compress : true, //compress html5
port :9000
}
};
把index.html中引用的js路径改为："temp/output.js"
在终端中执行命令 webpack-dev-server
修改被打包的js文件如build.js文件，保存，则页面自动刷新。
在package.json中创建命令执行的快捷方式：
...
"scripts": {
"server": "webpack-dev-server",
"build" : "webpack"
},
...
则终端中可以直接输入 npm run server 或 npm run build 执行命令。
-------- Lesson3 把css文件和小图片也打包到js文件中 --------
可以把多个css文件和小图片打包到js文件，以减少http请求
安装：
npm install --save-dev style-loader css-loader
npm install --save-dev file-loader url-loader
配置webpack.config.js中的module:
...
module : {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 20000 //图片小于20kb则转成base64打包入js文件
}
}
]
}
]
}
...
在build.js中引入html.index要使用的css文件:
import css from "../css/index.css";
执行命令webpack，查看output.js，可以看到css文件和小图片都被打包进来了。
-------- Lesson4 5 js压缩与html发布 --------
uglifyjs-webpack-plugin用于打包时压缩js
安装:
npm install --save-dev uglifyjs-webpack-plugin
配置webpack.config.js:
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");
...
plugins : [
new uglifyJsPlugin()
]
...
执行命令webpack,发现output.js是被压缩了的。
html-webpack-plugin用于发布index.html到出口文件夹
安装：
npm install html-webpack-plugin --save-dev
配置webpack.config.js:
const htmlWebpackPlugin = require("html-webpack-plugin");
...
plugins : [
new htmlWebpackPlugin({
minify : {
removeAttributeNode : true
},
hash : true,
template : "./src/assets/index.html",
title : "Hi Webpack"
,projectPath : "http://localhost:9000/src/" //方便以后替换页面中所有图片的url
})
]
...
注意：这个的使用存在问题，hash:true并没有生效
同时，运行webpack-dev-server报错 ERROR in output.js from UglifyJs
Unexpected token: name (urlParts) [output.js:3694,4]
原因是：在plugins中使用uglifyJsPlugin就会出现该错误
解决：目前不知到如何解决
-------- Lesson6 把css从js中分离出来 --------
把css文件单独打包，不和js混合在一起
安装:
npm install --save-dev extract-text-webpack-plugin
使用：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
执行webpack命令，看到css文件被分离出来了。
-------- Lesson7 js图片处理技巧 --------
...
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 100 //图片小于20kb则转成base64打包入js文件
,outputPath:"assets/images/" //图片打包后的存放路径
,name:"[hash].[ext]" //[name]图片保持原名 [hash]重命名
,publicPath:"http://cdn.qianduangongcheng.com/" //如果使用cdn 设置图片打包路径前缀
}
}
]
}
...
js中如果使用图片：
var imgUrl = require("./assets/images/qq.jpg");
var imgHtml = '
';
-------- Lesson8 html中的图片处理 --------
webpack不建议在html中直接使用![]()
标签
如果非要使用，则打包时需要：html-withimg-loader
安装：
npm install html-withimg-loader --save-dev
使用：
在rules中配置
{
test: /\.(htm|html)$/i,
use: ['html-withimg-loader']
}
执行webpack命令，则发现html中的图片也被打包了。
开发中常常会按照功能分模块多人并行开发，通常一个模块一个文件夹。
-------- Lesson9 json数据加载 --------
webpack3中不再必须babel了
js文件中引入json文件：
const json = require("./json.json");
document.getElementById("json").innerHTML = json.name;
webpack热加载：
new webpack.HotModuleReplacementPlugin()
-------- Lesson10 生产环境和开发环境设置 --------
npm的三种安装方式
npm install jquery 不提倡
npm install jquery --save 生产环境需要的模块
npm install jquery --save-dev 开发环境需要的模块
npm install 安装指向devDependencies
npm install --production 安装指向dependencies
设置webpack.config.json:
//windows
"scripts": {
"ser": "webpack-dev-server",
"div": "set aaa=dev&webpack",
"build":"set aaa=build&webpack"
},
//mac linux
"scripts": {
"ser": "webpack-dev-server",
"dev": "export aaa=dev&&webpack", //两个&&表示设置全局化 &只能在当前跑
"build":"export aaa=build&webpack"
},
npm run dev 跑开发环境
npm run build 跑生产环境
-------- Lesson11 webpack模块化写法总结 --------
老牌模块化 amd require
cmd define
新建文件add.js:
function add(a,b) {
return a+b;
}
module.exports = add;
在build.js中使用：
import aaaa from "./add.js";
console.log( aaaa(1,2));
模块化方式设置webpack的配置：
项目跟目录下新建文件夹webpack-config
其下建立文件entry.js,内容：
const entry = {};
entry.dev = {
one : "./src/assets/js/build.js"
};
entry.build ={
one : "./src/assets/js/build.js"
};
module.exports = entry;
在webpack.config.js中使用：
const entry = require("./webpack-config/entry.js");
module.exports = {
entry : entry.dev,
...
-------- Lesson12 打包第三方模块 --------
vue和angular都有自己单独的一套cli 其中已经建立了webpack
react可以单独来个webpack
两种姿势：
1）引用了就打包
先安装:
npm install jquery --save
在需要的每个js文件中使用:
import $ from 'jquery';
$("#div1").html("hello!");
2）引用了并且使用了才打包
在整个webpack环境中使用jquery:
设置webpack.config.js中的plugins：
plugins : [
new webpack.ProvidePlugin({ //引入模块
$ : "jquery",
"jQuery" : "jquery"
})
...
-------- Lesson13 watch的应用场景 --------
当后台接口也跑起来了，前端就不能webpack-dev-server单独跑一个端口号了
应该跑整个项目，这时还要自动刷新
配置webpack.config.json：
watchOptions:{
poll : 1000,
aggregeateTimeout : 500, //0.5s
ignored : /node_modules/,
}
module.exports = {
output : {
hotUpdateChunkFilename: "./hot-update.js",
hotUpdateMainFilename: "./hot-update.json"
}
}
webpack --watch 可以检测是否入口文件会有改动
再执行webpack --watch 则可以监测文件改动自动刷新
-------- Lesson14 使用plug独立公共模块 --------
给js减肥
把jquery作为第三方单独来引用
module.exports = {
entry : {
build: "./src/assets/js/build.js",
jquery : "jquery"
}
}
...
plugins : [
//指示entry中的jquery单独打包
new webpack.optimize.CommonsChunkPlugin({
name : "jquery",
filename : "assets/js/jquery.min.js",
miniChunks:2
})
]
...
执行webpack发现，jquery被单独打包了。
安装vue：
cnpm install vue --save
-------- Lesson15 公共资源发布&结束语 --------
通过webpack把静态资源发布到��️指定目录中
cnpm install --save-dev copy-webpack-plugin
设置webpack.config.js文件：
const copyWebpackPlugin = require("copy-webpack-plugin");
plugins : [
new copyWebpackPlugin([{
from : __dirname + "/src/public",
to : "./public"
}])
]
webpack.config.js文件的target属性：
module.exports = {
target : "web", //web默认 / node-以项目模块的方式打包
...
