webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。
将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载
bundle是webpack打包出来的文件,chunk是webpack在进行模块的依赖分析的时候,代码分割出来的代码块。module是开发中的单个模块
可以用一些官方脚手架
// 首先安装
npm install -g @vue/cli
// 新建项目hello
vue create hello
// 确保安装了npx,npx在npm5.2.0默认安装了
// 新建项目hello
npx create-nuxt-app hello
module.exports = {
entry: './path/to/my/entry/file.js'
}
module.entrys = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js'
}
}
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,相比传统http服务器开发更加简单高效
webpack的一个功能,可以使代码修改后不用刷新浏览器就自动更新,高级版的自动刷新浏览器
webpack-dev-server支持两种模式来自动刷新页面
http://localhost:8080/webpack-dev-server/index.html
// 以命令行启动webpack-dev-server有两种方式// 方式1 在命令行中添加--inline命令// 方式2 在webpack-config.js添加devServer:{inline: true}// 以node.js API启动有两种方式// 方式1 添加webpack-dev-server/client?http://localhost:8080/到webpack配置的entry入口点
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
// 将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
loader
// url-loader增强版的file-loader,小于limit的转为Base64,大于limit的调用file-loader
npm install url-loader -D
// 使用
module.exports = {
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
outputPath: 'images/',
limit: 500 //小于500B的文件打包出Base64格式,写入JS
}
}]
}]
}
}
plugins
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', // 配置输出文件名和路径
template: './public/index.html', // 配置要被编译的html文件
hash: true,
// 压缩 => production 模式使用
minify: {
removeAttributeQuotes: true, //删除双引号
collapseWhitespace: true //折叠 html 为一行
}
})
]
}
npm install clean-webpack-plugin -D
// 修改webpack.config.js
const cleanWebpackPlugin=require('clean-webpack-plugin')
module.exports = {
plugins: [new cleanWebpackPlugin(['dist'])]
}
安装 npm i -D @babel-preset-env @babel-core babel-loader
配置.babelrc
{
"presets": ['@babel/preset-env']
}
配置webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {loader: 'babel-loader'}
}]
}
}
module.exports = {
optimization: {
splitChunks: {
common: {
// 抽离公共代码
chunks: 'initial',
name: 'common', // 打包后的文件名
minChunks: 2, // 最小引用2次
minSize: 0 // 超出0字节就生成一个新包
},
styles: {
// 抽离公用代码
name: 'styles',
test: /\.css$/,
chunks: 'all',
minChunks: 2,
enforce: true
},
vender: {
// 抽离第三方插件
test: /node_modules/,
chunks: 'initial',
name: 'vendor', // 打包后的文件名
priority: 10 // 设置优先级,防止与自定义公共代码提取时被覆盖,不进行打包
}
}
}
}
Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS
Child.prototype = new Parent();
Parent.call(this)
function Child(name,age){
// 继承属性
Parent.call(this, name)
this.age=age
}
// 继承方法
Child.prototype = new Parent()
Child.prototype.constructor = Child;
function object(obj){
function F(){}
F.prototype=obj return new F();
}
var person1=object(person);
在ES5中Object.create()可替换上面的方法object() var person1 = Object.create(person);
function createAnother(obj){
var clone=object(obj);
// ES5中用这个
// var clone=Object.create(obj);
// 增强对象
clone.sayHi=function(){};
return clone;
}
var person1=createAnother(person)
// 借用构造函数增强子类实例属性(支持传参和避免篡改)
function Child(name,age){
// 继承属性
Parent.call(this, name)
this.age=age
}
function inheritPrototype(Child, Parent){
var prototype=Object.create(Parent.prototype);
prototype.constructor=Child;
Child.prototype=prototype;
}
// 将父类原型指向子类,这样子类就能使用父类原型链的属性/方法
inheritPrototype(Child, Parent);
优点:只调用一次构造函数,原型链不变,是最成熟的
重点:利用Object.assign将父类原型上的方法拷贝到子类原型上,这样子类实例实例就可以使用父类的方法
Object.assign(Child.prototype, Parent.prototype);
Child.prototype.constructor=Child;
重点:使用extends表明继承自哪个父类,并且在子类构造函数中必须使用super,可以看做是Parent.call(this,value)
class Parent{
constructor(value){
this.val=value
}
}
class Child extends Parent{
constructor(value){
super(value)
this.val = value
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。