1、使用快捷安装时,文件夹的名字不能是webpack，否则在安装webpack时，会报错 Refusing to install package with name "webpack" under a package 因为与webpack项目重名了
2、设置mode
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
npx webpack --mode development
3、__dirname Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。 相反，./ 会返回你执行 node 命令的路径，例如你的工作路径。 有一个特殊情况是在 require() 中使用 ./ 时，这时的路径就会是含有 require() 的脚本文件的相对路径。
4、path.resolve 需要注意的是：如果在处理完所有给定的 path 片段之后还未生成绝对路径，则再加上当前工作目录。
5、 npm run build 代替npx webpack 通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
6、安装webpack-cli之前，要先安装webpack npm install -D 安装到dev开发环境
7、解析css文件，使用style-loader和css-loader 在依赖于此样式的文件中引入 import './style.css'。当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中，最终是以style的方式引入
8、解析图片和字体图标 file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录 如何使用图标字体
9、CleanWebpackPlugin --清除dist文件夹上一次的打包文件，报错CleanWebpackPlugin is not a constructor 用法改变
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
new CleanWebpackPlugin()
https://www.jianshu.com/p/0e99366ce796
------------------------------------------ 进阶 ------------------------------------------
10、模块热更新（ HMR） 它允许在运行时更新各种模块，而无需进行完全刷新
11、tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 在package.json中设置 "sideEffects": false 在webpack.config.js中设置mode: 'production'
12、uglifyjs-webpack-plugin报错，uglifyjs是js文件压缩插件
1） 解决方案：重装webpack webpack-cli，然后在重装uglifyjs-webpack-plugin https://www.jianshu.com/p/07a58c04be10
2）ERROR in bundle.js from UglifyJs Unexpected token: keyword «const» [bundle.js:100,2]
解决方案：将es6转换成es5
https://www.cnblogs.com/wangzisheng/p/9101467.html
3）可以使用快捷方式替代 --optimize-minimize 标记将在后台引用 UglifyJSPlugin
13、Split CSS，将style文件单独分离出来，使用extract-text-webpack-plugin@next组件 https://www.webpackjs.com/plugins/extract-text-webpack-plugin/ https://www.jianshu.com/p/e244c92f8292
1）报错Tapable.plugin is deprecated. Use new API on `.hooks` instead，extract-text-webpack-plugin目前版本不支持webpack4
2）报错：CssSyntaxError (2:1) Unknown word loader的引入顺序，
use: ['style-loader', 'css-loader']
3）报错：document is not defined style-loader和extract-text-webpack-plugin组件只能二选一，正确的配置如下
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader'],
fallback: 'vue-style-loader'
})
}
14、报错webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
解决：将公共的依赖模块提取到已有的入口 chunk 中，webpack4用法有更新
https://blog.csdn.net/github_36487770/article/details/80228147
15、懒加载就是按需加载，在第一次调用时，加载某个模块 使用这种方法实现懒加载:：import(/* webpackChunkName: 'print' */ './print').then(module => {}
16、缓存 使用缓存的原因：如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本 重新编译时，只有内容改变和引用改变内容模块的模块hash值会改变
17、提取模板 用webpack打包node_modules里的插件 https://www.cnblogs.com/xieqian/p/10973039.html
18、创建library？？？
19、shimming（填隙）：处理不符合规范的模块的方法
1）polyfill（多边形填充）： Polyfilling 是由 RemySharp 提出的一个术语，它是用来描述复制缺少的 API 和API 功能的行为 Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异 2）imports-loader,exports-loader使用方法？？？？
20、安装webpack-cli时报错：Cannot find module 'webpack-cli'
解决方案： npm install webpack-cli -g
21、PWA：类似小程序的无需安装，即用即走的新技术，谷歌开发
22、开启CSP网页安全政策防止XSS（跨站脚本攻击）攻击 https://www.cnblogs.com/leaf930814/p/7368429.html
23、vagrant是一个工具，用于创建和部署虚拟化开发环境的
24、根据udms-web项目，搭建一个vue项目 包含功能：
1）打包时，可以根据文件类型放到对应的文件夹中 js文件放到js文件夹下： output: { filename: 'js/app.js' },
2）清空dist下的文件，除了用clean-webpack-plugin，还可以用rimraf插件
3）安装vue-loader后报错，vue-loader的版本降低为14.2.4 vue-loader requires @vue/compiler-sfc to be present in the dependency tree
解决：https://blog.csdn.net/weixin_38098195/article/details/80630958
4）热更新时，出现错误：Cannot GET / https://segmentfault.com/q/1010000012720634/ https://blog.csdn.net/a2013126370/article/details/88249664
注意点：HtmlWebpackPlugin插件的filename必须是index.html才会自动打开页面
5）htmlWebpackPlugin插件
a）详解 https://www.cnblogs.com/wonyun/p/6030090.html
b）template 视口？？ http-equiv="X-UA-Compatible" https://blog.csdn.net/changjiangbuxi/article/details/26054755
6）webpack的分包策略 https://www.jianshu.com/p/23dcabf35744
7）webpack-cdn-plugin：webpack中使用CDN
https://www.jianshu.com/p/86602494dbb7
https://www.jianshu.com/p/9248db0349fb
8）webpack 的 runtime 和 manifest，管理所有模块的交互。 runtime：webpack模块交互时的逻辑 manifest：webpack标记模块间关系的数据
runtime 和 manifest 的注入在每次构建都会发生变化
分离manifest
const productionConfig = merge([ ... { optimization: { splitChunks: { ... }, runtimeChunk: { name: "manifest", }, }, }, ... ]);
9) options/query provided without loader (use loader + options) options用法有误 解决：
module: {
rules: [
{
test: /\.js|jsx$/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015'], //加载react和es2015的包 plugins: ['react-html-attrs'] //添加组件的插件配置
}
} ,
exclude: /(node_modules)/
},
{ test: /\.css$/, loader: 'style-loader!css-loader' }
] },
https://www.cnblogs.com/BetterMan-/p/9867642.html
10）ReferenceError: Unknown plugin "react-html-attrs" specified in "base" at 0 未安装babel-plugin-react-html-attrs
11）Module not found: Error: Can't resolve 'object-assign'
网友评论