## Webpack的配置和使用
### 安装
1. 全局安装
```
npm install webpack -g
```
2. 本地安装
```
npm install webpack -D
```
### 使用
#### 直接通过命令参数来执行
1. 如果是全局安装的
```
webpack 入口文件 出口文件
```
2. 如果是本地安装的
2.1 先在package.json的script标签中添加一条命令（就和全局的命令一模一样）
2.2 通过npm run 命令名 来执行命令 #### 通过配置文件来执行
如果是使用的配置文件，那么在使用webpack的命令的时候，就不需要再传递参数了！ 配置文件名为 webpack.config.js, 这个文件一般被放在网站的根目录下 webpack.config.js是一个node.js的模块，所以里面的代码，就是nodejs代码，需要通过nodejs模块化的方式，将配置对象进行导出！ 基础配置项
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
}
} ``` ### 使用webpack打包别的类型的文件
webpack默认支持的文件类型，只有js文件，如果在项目中出现了其他类型的文件，那么webpack本身是无法进行处理的，所以我们需要为每一个类型的文件，单独指定一个加载器（loader） #### css
在webpack的项目中，如果要使用css文件，我们可以将css文件当做一个模块，使用import的方式引入到js当中，最终webpack会将css文件中的内容，一起打包到最终的js文件中，也可以在页面中生效 要打包css文件，就需要给css文件配置loader，需要两个loader： style-loader css-loader 1. 安装相应的loader
```
npm install style-loader css-loader -D
```
2. 在webpack.config.js中配置css文件对应的loader
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
}
]
}
}
``` #### less sass
less需要的loader: style-loader css-loader less-loader 依赖项： less
sass需要的loader: style-loader css-loader sass-loader 依赖项： node-sass 1. 安装相应的loader 1.1 less-loader:
```
npm install less-loader less -D
```
1.2 sass-loader
```
npm install sass-loader node-sass -D
```
2. 配置加载器
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
}
``` #### 图片 字体 打包
图片需要的loader: url-loader 依赖项： file-loader
字体需要的loader: url-loader 1. 安装
```
npm install url-loader file-loader -D
```
2. 配置
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
//图片文件
test: /\.(jpg|gif|png|jpeg|svg|bmp)$/,
use: [{
loader: "url-loader",
options: {
//如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
limit: 1024 * 50
}
}]
},
{
//字体文件
test: /\.(woff|woff2|eot|ttf)$/,
use: ["url-loader"]
}
]
}
}
``` ### ES6 代码打包
用到的loader: babel-loader 依赖项： babel-core
用到转码规则： babel-preset-env
1. 安装
```
npm install babel-loader babel-core -D
```
2. 配置
2.1 创建一个.babelrc 用来指定转码的规则
```js
{
presets: [
"env"
]
}
```
2.2 webpack.config.js配置加载器 ```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称，要注意，调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
//图片文件
test: /\.(jpg|gif|png|jpeg|svg|bmp)$/,
use: [{
loader: "url-loader",
options: {
//如果图片超过下面这个数据所标注的大小，那么图片将不会被转换成base64的格式，直接会将图片文件扔到dist目录里
limit: 1024 * 50
}
}]
},
{
//字体文件
test: /\.(woff|woff2|eot|ttf)$/,
use: ["url-loader"]
},
{
//ES6
test: /\.js$/,
//排除node_modules中的内容
exclude: /node_modules/,
use: ["babel-loader"]
}
]
}
}
```
### html-webpack-plugin的使用
作用： 将src目录下的index.html作为模板，每次在打包的时候，都会将其复制到dist目录下，并且自动为其引入bundle.js 1. 安装
```
npm install html-webpack-plugin -D
```
2. 配置webpack.config.js
```js
var HtmlWebpackPlugin = require("html-webpack-plugin")
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, "src/index.html")
})
]
} ``` ## webpack-dev-server的使用
如果没有这个东西，那么每次在修改代码之后，都需要重新进行打包，才能看到效果！ webpack-dev-server可以启动一个简易的http服务器，当代码发生改变的时候，实时的进行打包并且刷新页面显示效果！ 这个东西只会打包更新了的内容，并不会将整个项目完整的打包，所以效率会比较高，而且它打包的内容都是直接放在内存里面的，所以访问速率也会非常快 1. 安装
```
npm install webpack-dev-server -D
``` 2. 使用 2.1 直接给命令传参
```
webpack-dev-server --port 9000 --contentBase ./src --hot
```
2.2 在webpack.config.js中进行配置
```js
var path = require("path"); //如果使用webpack.config方式进行配置，那么必须有这个包引入
var webpack = reuqire("webpack"); module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
devServer: {
port: 9999,
contentBase: "./src",
hot: true
},
plugins:[
//这边是给dev-server设置一个插件，如果没有这个插件则热更新会报错
new webpack.HotModuleReplacementPlugin()
]
} ``` ## babel-cli的使用
1. 安装
```
npm install babel-cli -g
npm install babel-preset-env
```
2. 配置
创建.babelrc文件
```
{
presets: [
"env"
]
}
```
3. 使用
```
babel 要转换的文件的路径 --out-file 输出的文件的路径
``` ## 单文件组件
就是将组件相关的内容（HTML JS CSS）全部放到了一个.vue文件当中 ```html
<template>
<div>
//这里就是组件的html部分也就是所谓的模板
</div>
</template> <script>
export default {
data(){},
filters: {},
components: {},
watch: {},
directives: {},
created(){}
}
</script> scoped属性标志着这个style标签中的css样式是只对当前组件有效！
<style scoped>
</style>
``` ## Vue-Cli
这是一个可以快速生成一个项目基本结构的vue工具 1. 安装
```
npm install vue-cli -g
```
2. 使用
```
vue init webpack 项目名称
``` ## 在项目模板中写代码
1. 创建组件！
2. 配置路由！ 项目模板的获取两种方式：
1. 自己写的模板
https://github.com/avakpan/vue-template 2. vue-cli生成模板
在使用vue框架的时候对应的webpack.config.js的配置,利用babel转换ES6为ES5的相关配置,以及下载vue项目基本结构的地址,通过vue-cli搭建vue项目基本结构.