安装
-
npm install --save-dev webpack
-
npm install --save-dev webpack@<版本号>
如果版本使用4.0+，需要安装CLI
-
npm install --save-dev webpack-cli
一般来水使用本地安装，这样在webpack引入破坏变量的依赖时更容易分别升级项目。
配置脚本：
"scripts":{
"start":"webpack --config webpack.config.js"
}
webpack环境配置&基本执行
-
初始化配置文件 npm init -y
-
安装wenpack及cli npm install --save-dev webpack & npm install --save-dev webpack-cli
-
创建项目并添加目录结构 结构如下：
-
分发代码文件夹 dist
-
源代码文件夹 src
-
初始化文件 package.json
-
配置文件 webpack.config.js
-
-
执行命令 npx webpack即可输出打包代码
webpack执行配置
-
在webpack.config.js中配置entry(入口)和output(输出)
-
在package.json的srcipts中加入项 ["bulid":"webpack"]
-
终端执行 npm run build
注意：
-
在安装一个要打包到生产环境的安装包时，要使用 npm install --save。如果要安装一个用于开发环境的安装包，要使用npm install --save-dev
-
webpack不会更改import和export语句以外的部分。
-
在windows终端通过路径去调用webpack时，必须使用反斜线。列入：node_modules\.bin\webpack --config webpack.config.js。
管理资源
-
动态打包依赖项（创建所谓的依赖图），可以避免使打包未使用的模块。
-
除了JavaScript之外，还可以通过loader引入其他类型的文件。
-
加载css
-
命令: npm install --save-dev style-loader css-loader
-
webpack通过正则表达式来确定要查找的文件并提供给指定的loader。这种情况下，以.css结尾的所有文件都将提供给style-loader和css-loader。在webpack.config.js中加入代码配置:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
-
多数情况下可以进行css分离，以便在生产环境下节省加载时间。
-
loader可以支持你想要的任何css处理风格 -postcss，sass和less等。
-
-
加载图片
-
命令：npm install --save-dev file-loader
-
在webpack.config.js中加入代码配置：
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)/,
use: [
'file-loader'
]
}
]
}
-
在入口js中导入图片
-
-
webpack三种常用的代码分离
-
入口起点：使用entry配置手动分离代码
-
会出现重复的引用
-
-
防止重复：使用commonsChunkPlugin去重和分离chunk-
该插件在webpack4.0已经被移除，如果使用改功能，使用SplitChunksPlugin代替
-
-
SplitChunksPlugin
-
chunksFilter: [Function: ASYNC_CHUNK_FILTER],
-
minSize: 0,
-
maxSize: 0,
-
minChunks: 1,
-
maxAsyncRequests: 1,
-
maxInitialRequests: 1,
-
hidePathInfo: false,
-
filename: undefined,
-
getCacheGroups: [Function: fn],
-
automaticNameDelimiter: undefined,
-
fallbackCacheGroup: { minSize: 0, maxSize: 0, automaticNameDelimiter: '~'}
-
-
动态导入：通过模块的内联函数调用来分离代码
-
ECMAScript的import提案
-
import会在内部用到promise，如果旧版本使用import，请使用polyfill来shim promise 语法：import(相对路径)
-
ES2015 loader定义的import()，可以在运行时动态加载ES2015模块。改方式不允许定义模块名称或者其他属性，但是可以通过注释接受一些特殊的参数，而无需破坏规定。(注释参数可以用在提取模块的名称上面)
-
-
由于import函数返回一个promise，因此它可以和函数async一起使用，但是要使用像babel这样的预处理器和动态导入babel插件。
-
-
webpack特定的require.ensure
-