1、安装

1、npm install -g webpack全局安装
2、npm install --save-dev webpack项目根目录

2、编译命令

webpack .\src\main.js

3、配置文件webpack.config.js

webpack是基于nodejs进行构建的,支持node代码

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

4、webpack-dev-server工具，实现自动打包编译功能

工具会读取项目根目录下的webpack.config.js配置文件进行打包构建
安装：npm i webpack-dev-server -D
1、必须要本地项目中安装webpack，全局的不可以。
2、使用在scripts下，加dev:'webpack-dev-server'。然后npm run dev可以开始自动打包编译监听代码的改动。

image.png

webpack-dev-server帮我们打包生成的bundle.js并没有存放到实际的物理磁盘上（非dist/bundle.js），而是直接托管到了电脑内存中，项目目录中是找不到这个bundle.js的。所以引用路径要修改为/bundle.js

webpack-dev-server常用命令

dev:'webpack-dev-server --open --port 3000 --contentBase src --hot'

5、html-webpack-plugin在内存中生成html

webpack.config.js

//只要是plugin,放到plugins节点中去
const htmlWebpackPlugin =  require('html-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
plugins:[
  new htmlWebpackPlugin ({
template:path.join(__dirname,'./src/index.html'), //指定模板页面，生成内存中的页面
filename:'index.html'
})
]
};

此时在html中不再需要手动引入 bundle.js了，自动创建了script标签引用了正确的bundle路径

6、loader处理css表

webpack默认只能打包js类型的文件，无法处理其他非js类型的文件，如果要打包其他类型文件，需手动安装第三方加载器。
main.js

import './css/index.css'
import './css/index.less'
import './css/index.scss'
//1、npm i style-loader css-loader -d
//2、在webpack.config.js中，配置一个节点module,是一个对象，包含rules属性是个数组，rules中存放了所有第三方文件的匹配和处理规则

webpack.config.js

module.exports = {
  ...
module:{
  rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//less文件的补充
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},/scss文件的补充
//匹配到以.css结尾的文件，调用loader时,从右向左处理，即先css-loader,再style-loader，
//处理结束后交给webpack进行打包合并，最终输出到bundle.js中去
  ]
}
};

7、url-loader

webpack无法处理css中的url地址
安装：npm i url-loader file-loader -d (file-loader是url-loader的内部依赖)

{test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=7221&name=[hash:8]-[name].[ext]'}

不加limit时发现图片url会变成base64。limit给定的值是图片的大小，单位是byte，如果图片大于或等于给定的limit值，不会转为base64字符串，如果小于给定的limit则会转为base64

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

8、babel

webpack默认只能处理一部分es6新语法，一些高级的es6等语法处理不了，需要借助第三方loader把高级语法转为低级语法之后，把结果交给webpack去打包到bundle.js中,通过babel
1、安装
第一套包 npm i babel-core babel-loader babel-plugin-transform-runtime -d
第二套包 npm i babel-preset-env babel-preset-stage-0 -d
2、配置
webpack.config.js配置文件中，在module节点下的rules中添加一个新的匹配规则
注意：配置babel的loader规则时，必须把node_modules目录，通过exclude选项排除掉

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}//排除node_modules目录下的js文件

3、在项目根目录下新建一个叫做 .babelrc 的babel配置文件，属于json格式

{
  "presets":["env","stage-0"],
  "plugins":["transform-runtime"]
}

9、在webpack构建的项目中，使用vue

复习：在普通网页中使用vue
1、使用script 标签引入vue的包
2、在index页面中，创建一个id为 app的 div容器
3、通过 new Vue得到一个vm的实例

在webpack构建的项目中，使用vue
1、安装vue包：npm i vue -s
2、使用vue模板页面，需要安装相关loader：npm i vue-loader vue-template-compiler -d，在配置文件中添加

{test:/\.vue$/,use:'vue-loader'}

3、main.js

import Vue from 'vue'
import login from './login.vue'//使用模板
//在webpack 中使用import Vue from 'vue'导入的vue构造函数，功能不完整，
//只提供了runtime-only的方式，并没有提供像网页中那样的使用方式,这时候如果用new Vue 方式会报错
//如何修改，可以具体看下面的补充内容
var vm=new Vue({
  el:'#app',
  data:{
    msg:'123'
  },
  render :function(createElements){//可以简化为render: c => c(login)
    return createElements(login)
  }
})

补充：包的查找规则
1.找下面根目录中有没有 node_modules文件夹
2.在 node_modules文件夹中，根据包名，这里用到的是vue，找到对应的 vue 文件夹
3.在vue文件夹中，找一个叫做 package.json 的包配置文件
4.在 package.json 文件中，查找一个 main 属性【main属性指定了这个包被加载时的入口文件】
修改vue被导入时包的路径，除了修改这个main属性外，还可以，在webpack.config.js里加一个节点

resolve:{
  alias:{
      "vue$":"vue/dist/vue.js"
  }
}

10、结合webpack使用vue-router

1、导入vue-router
2、手动安装vue-router
3、创建路由对象
4、创建组件
5、将路由对象挂载到vm上

import Vue form 'vue'
import VueRouter form 'vue-router'
Vue.use(VueRouter)
//导入app组件
import app from './app.vue'
//创建 apple 组件
import apple from './main/apple.vue'
var router = new VueRouter({
  routes:[
    {
      path:'/apple',
      component:apple,
      //添加子路由children:[{ path:'red',component:red},{ path:'green',component:green}]
    }
  ]
})
var vm=new Vue({
  el:'#app',
  render: c => c(app)，
  router
})

app.vue

<router-link to="/apple">apple</router-link>
<router-view></router-view>

将main.js进行改造，将路由模块单独提取router.js

//创建 apple 组件
import VueRouter form 'vue-router'
import apple from './main/apple.vue'
var router = new VueRouter({
  routes:[
    {
      path:'/apple',
      component:apple,
      //添加子路由children:[{ path:'red',component:red},{ path:'green',component:green}]
    }
  ]
})
export default router

一些随机补充

导入时经常看到的@：这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面定义。默认定义：@这东西代表着到src这个文件夹的路径