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。