本帖最后由 长沙-小知姐姐 于 2019-1-4 14:40 编辑
一、什么是Webpack
WebPack可以看做是**模块打包机**：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
二、webpack4.x基本使用
本地使用（全局环境）
npm install webpack webpacl-cli -g (webpack4.0 的一个依赖项)
装好之后可以可以直接在项目根目录使用 webpack 运行打包项目
PS: webpack4.0 采用约定大于配置的方式进行定义 ，详细的项目目录看`项目使用`方式
项目使用
1. 初始化
npm init -y
#### 2. 约定的项目结构 ``` + dist
+ src
+ index.html
+ index.js
+ package.json
+ webpack.config.js （可选），还是建议使用 ```
#### 3. webpack.config.js 配置的一些改变
1. 不需要设定入口文件和出口文件
2. 引入了模式 mode 可以快速切换
+ 开发环境（development）
+ 上线环境（production）
#### 4. 安装2个webpack核心包
npm|cnpm install webpack webpack-cli -D | yarn add webpack webpack-cli -D
#### 5. 安装webpack-dev-server把main.js生成在内存中
+ npm install webpack-dev-server -D
+ 在package的scripts属性上配置脚本
``` "scripts": { "dev": "webpack-dev-server --open --port 8080 --hot" } ``` #### 6. html-webpack-plugin 配置 （把index.html生成在内存中）
1. 安装 html-webpack-plugin
yarn add html-webpack-plugin -D
2. 在webpack.config.js 中配置plugins
``` const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html' })
module.exports = { model: 'development', //development production plugins: [ htmlPlugin }
ps: 配置 html-webpack-plugin 可以自动把打包好的main.js添加到index.html中 ``` #### 7、使用webpack使用css 、less
webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器
1. 安装依赖包
yarn add style-loader css-loader -D
yarn add less less-loader -D
2. 配置规则
```
// 这段代码意思是：匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析 { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }
{ test: /\.less$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'less-loader'] } // 打包处理 scss 文件的 loader ```
3. 在src目录下新建一个assets/css目录，创建index.css和index.css 样式可以随意定义
``` body { color: red; background: url(../images/1.png) }
```
4. 在index.js 中引入.css或者.less文件
import './assets/css/index.css' import './assets/css/index.less' #### 8、使用babel
ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了
1. 安装babel依赖包 ``` yarn add babel-core babel-loader babel-plugin-transform-runtime -D （核心包）
yarn add babel-preset-env babel-preset-stage-0 -D （语言包） ```
1. 在webpack.config.js中配置loader
``` module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } } ``` 2. 配置 .babelrc 文件
``` { "presets": [ "env", // es的所语法 "stage-0" // 指定用哪个版本 ], "plugins": [ "transform-runtime" // 在插件的基础上运行 } ```
#### 9、配置.vue 文件
在前面的例子里，我们使用 Vue.component 来定义全局组件，在实际项目里，更推荐使用单文件组件
1. yarn add vue-loader vue-template-compiler -D
2. 配置vue-loader规则
```
module: { rules: [ { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader }
```
3. 在webpack.config.js文件中配置vue-loader 插件
``` const { VueLoaderPlugin } = require('vue-loader')
plugins: [ new VueLoaderPlugin()
```
4. 在src目录下新建一个App.vue
``` <template> <div class="app"> app component </div> </template>
<script> export default { data: () => ({}) }; </script>
<style scoped> </style>
```
#### 10、配置url
把图片也当成模块引入
1. yarn add file-loader url-loader -D
2. webpack.config.js添加一个loader
``` { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
``` 3. 在src目录下新建一个assets/images目录，存放一张图片1.png
4. 在App.vue 中使用图片
``` <template> <div class="app"> app component <img src="./assets/images/1.png" alt="" > </div> </template> <script> export default { data: () => ({}) }; </script>
<style scoped> </style>
```
三、完整配置
https://github.com/fly-sy/webpack-vue
| 
收藏
淘帖
踩
