![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 69
火腿肠烧烤大赛冠军
F=-F
展开
-
webpack-底层原理(Loader编写、Plugin编写、 Bundler编写)
1原创 2021-07-29 16:24:43 · 717 阅读 · 0 评论 -
webpack-Vue CLI 3 的配置方法
小白什么都不用考虑直接运行 想要配置需要的操作 在根目录下创建vue.config.js文件 依据vueWebpack配置来改即可:Vue-Lii配置官网 本质就是webpack的二次封装 通过转化变成webpack可识别的参数 也可以通过configureWebpack实现原生webpack // vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin()原创 2021-07-29 11:11:05 · 183 阅读 · 0 评论 -
webpack-实战配置案例(打包样例、PWA、TS打包配置、WebpackDevServer、提升打包速度、多页面打包配置)
lodach以及自定义文件的打包 module.exports = { mode: 'production', entry: './src/index.js', //已使用包【避免重复引用、不打包该包】 externals: 'lodash', output: { //输出位置 path: path.resolve(__dirname, 'dist'), //输出名称 filename: 'library.js', // 支持script标签引入【在全局下增加变量】 lib原创 2021-07-29 10:32:08 · 230 阅读 · 0 评论 -
webpack高级概念(treeShaking、按环境打包、code Splitting、SplitChunksPlugin、PreLoading、Prefetching、CSS分割、shimmin)
treeShaking 动态打包有用的结构 (只支持ES Module) optimization: { //配置treeShaking usedExports: true }, 将不需要动态引入的文件 放在数组中(package.JSON) dev和Pro分开打包 分别创建一个webpack.dev一个webpack.prod文件 然后再package.json文件做如下更改 消除冗余代码 将共同的代码写入一个js文件中 然后引入第三方模块 webpack-merge 进行拼接 也可以原创 2021-07-21 16:55:22 · 219 阅读 · 0 评论 -
webpack-webpack核心概念(loader、打包静态资源、plugs、sourceMap、devServer、HMR、babel)
什么是loader 由于webpack只能默认识别js文件 所以遇到非js文件就需要利用loader将他解析/放到dist供代码使用 例如:打包一张图片 package.config.json: const path = require('path'); module.exports = { //默认模式(默认为production会压缩 dev不会) mode: 'development', entry: { //在这里配置打包的路径(入口文件名字默认为main) main: './src原创 2021-07-19 15:32:45 · 161 阅读 · 1 评论 -
webpack-是什么以及基本使用
webpack-模块打包工具 老方法逐次引入文件出现的问题 页面加载变慢 本身可能加载一个js文件现在需要加载很多 不知道每一个文件之间的关系 代码不容易维护 引入顺序等问题 查错困难 解决方式 在单一index.js中引入这些文件 运用import语法 引发问题 import为ESmodule语法,无法被浏览器识别 解决方式 利用webpack对代码进行翻译,进而 ps:webpack只认识部分引入规范所以不能定义为翻译器,被定义为bundler(模块打包工具) 模块的概念 支持的模块 这也就是为原创 2021-07-08 17:47:56 · 103 阅读 · 1 评论