webpack基础知识

我们使用,学习一种工具需要先明白它的作用。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),

其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

区别:

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,

组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,

使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的(转译)JavaScript文件。

版本迭代

http://www.css88.com/doc/webpack2/concepts/output/

http://www.css88.com/doc/webpack/

https://www.webpackjs.com/api/cli/ 脚手架

https://www.webpackjs.com/configuration/ 最重要

理解基础概念:

引入需要的插件

var webpack = require('webpack');

var path = require("path");

var fs = require("fs");

var DecoratorsPlugin = require('babel-plugin-transform-decorators-legacy')

var RestSpreadPlugin = require('babel-plugin-transform-object-rest-spread')

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {

entry: './path/to/my/entry/file.js' // entry: string|Array

};

module.exports = config;

1:入口起点(entry point):

定义哪个模块是依赖图的开始,寻找直接间接依赖

单个入口语法:

entry: {

main: './path/to/my/entry/file.js'

}

简写

entry: './path/to/my/entry/file.js'

多入口文件:多个依赖文件一起注入

entry: ['./path/to/my/entry/file.js','']

对象配置 可扩展性好。这个对象可以复用

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

分离 应用程序(app) 和 第三方库(vendor) 入口

const config = {

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

};

https://www.webpackjs.com/concepts/entry-points/#常见场景

//多入口代码复用 缓存 CommonsChunkPlugin

出口:默认./dist

output 属性告诉 webpack 在哪里输出它所创建的 bundles

单入口

const config = {

output: {

path: path.resolve(__dirname, 'dist'),

}

};

module.exports = config;

多入口

entry: {

app: './src/app.js',

search: './src/search.js'

},

output: {

filename: '[name].js',

path: __dirname + '/dist'

}

__dirname硬盘 name入口文件名字

高级进阶

使用 CDN 和资源 hash 的复杂示例:

output: {

path: "/home/proj/cdn/assets/[hash]",

publicPath: "http://cdn.example.com/assets/[hash]/"

}

在Webpack4中,我们不再使用CommonChunkPlugin了,

它被splitChunks和runtimeChunk这两个新API所取代。

mode: "production",

entry: {

app: path.join(__dirname, "index.tsx"),

},

output: {

path: path.resolve(__dirname, "public/dist"),

publicPath: "",

chunkFilename: "[name].js",

filename: "[name].js"

},

optimization: {

runtimeChunk: {

name: "manifest"

},

splitChunks: {

cacheGroups: {

vendor: {

test: /[\\/]node_modules[\\/]/,

name: "vendors",

priority: -20,

chunks: "all"

}

}

}

}

https://www.cnblogs.com/toward-the-sun/p/6147324.html?utm_source=itdadao&utm_medium=referral

chunkFilename 只能用CommonsChunkPlugin插件来提取

用途

https://www.cnblogs.com/baota/p/6692075.html

mode

提供 mode 配置选项,告知 webpack 使用相应模式的内置优化

mode分为development/production,默认为production

https://segmentfault.com/a/1190000013712229

loader

https://www.webpackjs.com/loaders/

loader 类似于其他构建工具中“任务(task)”

各种loader需要先 下载 --save-dev

npm install --save-dev ts-loader

module.exports = {

module: {

rules: [

{ test: /\.css$/, use: 'css-loader' },

{ test: /\.ts$/, use: 'ts-loader' }

]

}

};

module: {

rules: [

{

test: /\.css$/,

use: [

{ loader: 'style-loader' },

{

loader: 'css-loader',

options: {

modules: true

plugin

https://www.webpackjs.com/plugins/

webpack 插件是一个具有 apply 属性的 JavaScript 对象

apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问

插件目的在于解决 loader 无法实现的其他事

plugins:[

new ExtractTextPlugin('page.css'),

new HtmlWebpackPlugin({

filename:"regular/index.html",

template:"./src/index.html",

title:"Logan",

inject:false

}),

new webpack.DefinePlugin({

'RENDER_ENGINE_VERSION': JSON.stringify("5.2.0"),

"LEGAO_DOMAIN":JSON.stringify(""),

"LEGAO_VERSION":JSON.stringify("0.1.0"),

"APP_KEY":JSON.stringify(""),

"PROJECT_DOMAIN":JSON.stringify(""),

"PROJECT_NAME":JSON.stringify(""),

"PROJECT_VERSION":JSON.stringify("),

"UPLOAD_URL":JSON.stringify(""),

"__DEV__":JSON.stringify("true"),

"PRE_FIX_URL":JSON.stringify("")

})

]

resolve

这些选项能设置模块如何被解析

resolve:{

alias: {

Task: path.resolve("./src/page/task/"),

Event: path.resolve("./src/page/event/"),

Project: path.resolve("./src/page/project/"),

Compliance:path.resolve("./src/page/compliance/"),

Sections:path.resolve("./src/page/sections/"),

Utils:path.resolve("./src/utils"),

Pages:path.resolve("./src/page"),

DataPool:path.resolve("./src/dataPool")

}

},

命令的执行 package.json

"scripts": {

"start": "webpack-dev-server --color",

"build": "webpack&&lessc src/loganCommon.less build/loganCommon.css",

},

那么就可以在命令行里直播运行webpack命令进行打开;

那么打开里就要用到--config 来指定配置文件:

每个项目的需求不同,根据项目需求,增加配置。

不同的前端框架也提供了一些cli。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180620G1K42C00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券