Webpack 中常用的loader和plugin已经webpack如何配置

dist文件夹存放打包后的文件

动态获取出口路径，需要有webpack init 生成package.js文件

 1.1webpack是什么

1.2webpack五个核心概念

1.2.1Entry

入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2Output

输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

1.2.3Loader

1.2.4Plugins

1.2.5Mode

模式(Mode)指示webpack使用相应模式的配置

3.2打包样式资源

css-loder less-loder style-loder

3.3打包HTML资源

HtmlWebpackPlugin

3.4打包图片资源

url-loaderfile-loader

3.6devserver

运行指令npx webpack-dev-server

帮助我们自动刷新浏览器，打开浏览器，就不用我们每一次改了代码都要webpack一下才可以看见网页的变化

第 4 章：webpack 生产环境的基本配置

4.1 提取 css 成单独文件

用MiniCssExtractPlugin插件

4.2 css 兼容性处理

postcss-loader

 4.3 压缩 css

OptimizeCssAssetsWebpackPlugin

4.4 js 语法检查

eslint-loader

4.5 js 兼容性处理

v babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

4.6 js 压缩

mode: 'production'

生产模式下js会自动压缩

4.7 HTML 压缩

第 5 章：webpack 优化配置 

HMR

一个模块发送改变只会重新打包这一个模块，不会重新打包所有模块

把hot开启成true

5.2 source-map

打包之后的代码如果出错了，可以定位到源代码上面

5.3 oneOf

放在oneof下的

5.4 缓存

 用bable loder 

5.5 tree shaking

Tree Shaking指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助webpack里面自带的Tree Shaking这个功能，帮助我们实现

5.6 code split

可以将 node_modules 中代码单独打包一个 chunk 最终输出，把一个js文件划分成多个小的js文件

5.7 lazy loading

import 加箭头函数

5.8 pwa

离线访问

workbox-webpack-plugin

5.9 多进程打包

thread-loader

5.10 externals

拒绝打包

        

5.10 dll 

下面是具体使用webpack的细节了

在项目中使用webpack

1.webpack 需要打包的文件路径 打包后路径
2.因为webpack每次都要入口和出口，很麻烦，所以创建一个webpack.config.js文件用来配置入口和出口，再到package.json配置scripts的bulid
那么每次就可以用npm run build来执行打包，index.html引用打包后的资源文件
3.再后来，webpack.config.js文件中有开发时需要的东西，又有运行时需要的东西，所以现在要把他们分离开来
bulid文件下放base.config放公共的都需要的，dev.config放开发时需要的，prod.config放运行时需要的
4. 那这个时候webpack.config文件就没用了可以删除了
但是这样当我恩 npm run build 的时候会告诉我们没有webpack.config文件我们就要到package.json文件当中去找到script的bulid去配置
5.这个时候用npm run build会打包到build文件夹下的dist文件夹，但我们不希望这样做，需要修改base.config文件下的path，让他能打包到
build文件夹之外的一个dist文件夹（总的一个流程）

开始

 前端面是打包的文件，后面是打包之后放的位置

 webpack会自动帮我们找到打包文件依赖的文件一并帮我们打包进去

每次都要webpack入口文件和打包后的地址很麻烦怎么办

创建一个webpack.config.js文件

 这里依赖了第三方包，那么先npm init -y再npm install导入依赖的包

 用webpack的时候一般不用webpack来启动可以再packjson文件中搞一个映射之后就可以用

npm run bulid

 

再index.html引用打包后的文件 

css-loader

npm install --save-dev css-loader 安装loader，当然也要安装style-loader

安装之后还要再webpack.config.js文件中配置

 npm install --save-dev less-loader less 安装好loader还要到webpack.config.js文件中配置

 url-loader

npm install --save-dev url-loader

webpack.config.js文件中配置

 limit是限制图片大小

  当我们打包一张图片后，最后代码中的路径还是会加到src下的图片中去找，但是我们需要的是dist打包之后的文件夹下的图片所以要在webpack.config.js文件中配置publicPath,以后只要涉及到url的内容都会自动帮我们配置publicPath后的路径

 

 es6转es5

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015(看上去就感觉过时了，可以查一下，现在怎么用)

webpack.config.js文件中配置

 webpack使用vue的配置

npm install vue --save

这个app可以删掉的

 配置别名，到时候vue就是runtime compliler而不是runtime only了

 vue中的templet

 前端现在用spa页面的话就不要在index.html写别的代码了，可以写在入口文件vue下的templete中

 

 Vue终极使用方案

 把vue中的代码抽到APP组件当中去

 

把app这个组件抽离出去，创建一个app.js

 

 但是到现在还是不够，app.js中的模板和js代码还是混在了一起，不够好

 创建一个app.vue文件，把模板代码放过来

 把js代码放到app.vue script的标签当中

 .vue文件打包需要

npm install vue-loader vue-template-compiler --save-dev

还要配置webconfig.js

 APP.vue组件也可以使用其他的组件，

 

 可以用extensions来省略扩展名

 添加版权的plugin

记得要导入webpack

 因为index文件是没有打包到dist文件当中去的，呢这样就没有效果了所以我们需要打包index.html文件到dist文件当中

 导入plugin

 打包index.html文件之后，之前配置的publicpath就多余了

打包之后的index.html不会自动帮我我们写div id=app这段代码的，我们要配置htmlwebpcakplugin

 

实时监控我们的代码，不用每次运行前都要npm run build

 

 这个时候就不是用npm run build来运行了，这个时候应该用webpcak-dev-server但这个时候会因为全局和局部的环境问题所以要找到dist/.bin/webpcak-dev-server这个文件

在package.json文件修改scripts

 

 加--open可以帮我们自动打开浏览器 

现在，webpack.config.js文件中有开发时需要的东西，又有运行时需要的东西，所以现在要把他们分离开来

base放公共的都需要的，dev放开发时需要的，prod放运行时需要的

 npm install  webpack-merge --save-dev

运行时配置

 开发时配置

 那这个时候webpack.config文件就没用了可以删除了

但是这样当我恩 npm run build 的时候会告诉我们没有webpack.config文件我们就要到package.json文件当中去找到script的bulid去配置

 但是打包之后的资源就没放到dist文件夹下面了，他会打包到build文件夹下在创一个dist文件

我们去要去base.config下修改路径改成../dist这样才会打包到build文件夹之外再创一个dsit文件

webpack的东西就到此结束了，接下来可以看看vue cli的内容，他可以帮我们快速配置好webpack的一些配置，还有一些文件可以帮我们直接创建好，搭建好vue需要的环境，可以看我的另一篇文章

 vue cli