webpack 简单配置知识点总结

webpack基本使用

起步

• webpack基于node环境，如果想要使用webpack管理自己的项目，那么就需要先安装 node.js
• 安装webpack有两个作用域，一个是全局，一个是项目作用域【局部】
• 接下来就可以打包了
  • 打包第一步有唯一 的入口文件main.js 出口文件 bundel.js
  • 入口文件可以对其他文件做依赖，使用 es6模块化，commenJS 都可以
  • 命令 webpack 入口文件main.js路径 出口文件bundel.js路径
  • 这样 就可以打包出来 bundel.js了

修改 webpack配置

每次这个点 路径 太他吗麻烦了， 那么我们可以在项目的根目录下面创建 webpack.config.js文件来简单的配置webpack

• 创建这个文件，然后用 commenJS的方法导出一个对象 module.exports = { }
• 对象中使我们要写的配置，要想简化刚刚的操作，那么就需要告诉webpack 你的入口，你的出口
• entry ： { path: ./src/main.js }
• output: { } 出口不同于入口，出口需要更仔细的配置，首先要有一个path路径，该路径抵达导出文件的文件目录
• 其次需要一个filename 是导出文件的整个文件名字
• 此时运行会报错 告诉你 output中的 path 需要是一个 absolute 也就说需要绝对路径
• 然后我们也不能将其写死，因此想到了node中 path模块，
• 导入path模块，使用这个模块中的方法 resolve： path.resolve( __dirname , ‘./dist’ )
• 将其放到path这个属性下 再执行 成功

webpack loader

上面我们解决了入口 出口的简单问题，但是 webpack 真的能够正常打包么 ？ 他能够认识所有的文件和 图片么？

当我们在css文件中 定义个一个样式文件， 在main.js中 通过 require( 样式文件的路径 ) 的方式导入这个样式文件

然后开始打包 ，系统报错 说我们可能需要一个 loader 来操作这个css文件

• 那么我们开始配置loader,loader 还是在 webpack.config.js中配置，由于是loder 需要配置rules 很容易想到需要这个
• 那么rules对象 放在哪里呢？？ 没错 是放在 module中，module 又在 module.exoprts 导出的对象中
• rules 中应该有很多规则配置 因此 我们需要使用的应该一个对象
• module : { rules: [ ] } relues数组中应该是一个对象
• 要加载一个 css 文件 必须配置两个loader css-loader style-loader
• 先使用 npm init 初始化项目，产生 package.json 文件
• 然后 npm install css-loader style-loader --save-dev 开发时依赖
• 然后 进 module 中配置 module : { rules: [ { test : /.css$/ ， use: [‘style-loader’ , ‘css-loader’]} ] }
• 此处注意 rules 中传递 的两个 变量 一个 test 一个 use 注意 ！！！！不是 text 和 loader

less loader

• 和css 的使用基本一致
• 首先需要三个 loader的 支持 style-loader css- loader less-loader 本身 less也需要安装，因此 还需要安装less
• 其次在webpack.config.js 中module中配置， rules : [ { test:/.less$/ , use:[‘style-loader’,‘css-loader’,‘style-loader’]} ] 依赖关系 从右到左
• 然后 运行webpack 成功 打包

img-loader

图片的loader 基本和上面一样，有个小区别，img我们可以配置 base64的 最大容量

• webpack.config.js中 rules中传入一个对象，有 test 和 use test 用正则表达式 匹配所有图片的后缀，
• /.(png|jpg|jpeg|gif)$/ 后面的use传入一个对象， 原来是数组，其实可以使用对象的形式写来loader
• {loader: "url-loader" , options:{ limit:8192 , name:"img/[name].[hash:8].[ext]"}}
• file-loader 不需要注册 会默认使用
• 然后 需要 npm安装 对应的两个 loader file-loader url-loader

bable-loader

• webpack 不会直接将我们的es6 代码转为 es5代码 如果不使用相应 的loader的话 则 打包出来的文件中包含es6的语法
• 因此 我们需要使用 loader 配置好
• 转换es6 需要三个loader babel-loader babel-core babel-preset-es2015
• {loader: "babel-loader" , options:{ presets:['es2015'] }

packge.json

• 这里的 script 对象中可以规定 npm run 的 快捷键 我们可以设置 build : “webpack ” 之后我们就不需要用webpack命令去打包了 可以使用 npm run build

webpack 配置 Vue

• 项目webpack配置vue 首先肯定要有vue 包， 因为整个项目需要 vue框架去运行，因此应该是运行时依赖
• npm install --save vue
• 安装后 直接可以在入口文件 main.js 中通过 es6的方式 导入 Vue 整个构造函数，【因为vue使用 export default 导出 因此需要使用 es6方式导入，开始使用的是 commenJS 的方式导入 ，结果失败】
• 导入后我们就可 new Vue({ el:’#app’， data:{ msg:‘尼玛死了’}})
• 当然此时 并不能运行 因为默认导入的 runtimeonly的 vue文件，里面只支持render函数，并不支持 el这样的挂在模板的方式，因此没有办法解析模板，我们在 webpack.config.js 中 对这里进行一个配置 module 同级 后面传一个 resolve对象 对象中传入alias ：{ }对象，该对象中可以起别名 “vue$”:"vue/dist/vue.esm.js" ，当然前面还有一个数组 extensions:[ '.js','.css,'.vue'],然后运行打包 ,成功

vue中 el 和 template

• 当 new Vue（{}） 时候 有el ,也有 template的话 则template 会 将 el 挂载的元素整个替换掉
• 此时 我们的模板是在 new Vue({ }) 中 ，显得很乱，最好我们能够将其抽离成组件
• 前面我们已经学过vue的 组件 因此 我们直接 const App = { tempalte:"<h2>{{msg}}</h2>",data(){return{ msg:"尼玛死了"} }
• 然后将这个组件在 new Vue（{}）中注册下就可以使用了

抽离到 .vue文件中

• 刚刚的 方式虽然抽离了 但依然混乱，我们可以将代码抽到其他js文件中，使用 es6将其导出 ，然后在入口文件中导入，注册即可
• 但是 那个js文件中的 html代码和 js代码又混在了一起依旧很乱，我们此时就 引入了 .vue 文件
• 该文件相当于一个vue组件， template script style 三个元素，此时我们将 模板内容放到 template中 js代码放到 script中 样式放到 style中
• 然后在 入口文件中 导入，为什么导入会有效呢 因为script标签 有 es6的导出 操作 export default ={ }
• 但是 webpack 现在并不认识 .vue 文件 。， 因此我们需要加载 相应的 loader
• 两个 loader vue-loader 和 vue-template-compiler 其中 vue-loader 13版本以上的话 还需要装插件
• 安装好后 直接在 webpack中 配置即可 rules :[ { test:/.vue$/ , use:{ loader: “vue-loader” }} ] 此时我们运行成功
• 但是为了webpack 导入的时候 方便 不需要后缀 我们需要在 webpack.config.js 的 resolve中 添加对象 extensions:[’.js’, ‘css’, ‘.vue’]
• 成功 运行

webpack Plugin

版权插件

• 版权所有的plugin 只需要在 webpack.config.js中 注册下即可
• plugins : [ new webpack.BannerPlugin(“最终解释权归wyj所有”) ]

将index.html 打包到dist中

• 将index.html打包后放入dist文件件
• 使用Plugin html-webpack-plugin 安装这个插件
• const HtmlWebpackPlugin = require('html-webpack-plugin') 然后在 plugins中注册
• new HtmlWebpackPlugin({ template:'./index.html' })
• 由于 index.html有这个插件生成在了dist文件夹下面，因此我们默认不需要配置这玩意，但是由于我们需要在index.html中挂载app,因此我们需要一个模板告诉这个插件，因此我们还是需要这个文件，并且在new这个实例的时候传入一个对象，对象的属性 template 就给我们模板的路径
• 当然此时我们出口的 publicpath 也需要改掉，不能以dist 开头了

uglifyjs-webpack-plugin 插件

• 使用 uglify =》 uglifyjs-webpack-plugin 方法和上面一样 注意此处使用 版本1.1.1

• 具体参考 webpack官网

搭建webpack 本地服务器

• 安装 webpack-dev-server 由于webpack 是3.6版本的 本地服务这个最好是2.9版本

• 然后在 package.json 中配置好，在 webpack.config.js中 也配置好

• // webpack.config.js中的配置
  devServer: {
      contentBase: './dist',
      inline: true
    }
   
  // package.json中的配置
  "serve": "webpack-dev-server --open"    
  

runtime-only 和 runtime-compiler区别

runtime-compiler( v1 ) 整个解析渲染过程：

• template -> ast【抽象语法树】 -> render -> vdom -> UI

runtime-only ( v2 ) 整个解析渲染过程：

• render -> vdom -> UI

因此可以看出 runtime-only 性能更高，代码量更少，了解区别后，开发尽量使用 runtime-only

其实 后一个版本是在前一个版本的基础上加上了 compiler ,然而在 vue2.0版本后 最终的渲染都是通过 render函数的，如果写template 属性的话，则会对template进行编译，这样其实是对性能的一种损耗。因此我们尽量去使用runtime-only

那么runtime-only 怎么使用，注意点是什么呢？

• 直接组件中来一个 render: function( creatElement ){ return creatElement (组件)}

const APP = require('./src/components/App.vue')
new Vue ({
    el:'#app',
    render: h => h(App)
})

//此处的参数 h  其实就是 createElement 这个函数 ，这个函数有两种用法

//1. 传递三个参数   元素名字  属性名字（可选）   内容,其中数组内容中可以继续去嵌套createElement函数
new Vue ({
    el:'#app',
    render: createElement => createElement('h2',
              {class: 'box'},
              ['Hello MOTO', createElement('button',['按钮'])])
})

//2.开发中常用  就是直接传一个vue  组件
new Vue ({
    el:'#app',
    render: h => h(App)
})

因此我们在实例中就不要再使用 template 定义模板了 ，直接使用render 函数去渲染

原理：

此时你可能会有疑惑，我们定义组件的时候 也就是 App.vue 文件中还是有 template 便签啊， 其实在我们将App导入进来的时候，导入的这个App对象 中是没有 template属性的，为什么没有呢？？？？ 是因为我们之前是用了一个loader, 就是 vue-template-compiler ，它已经将我们的 .vue文件解析过了 ，因此其实已经没有template 了。

webpack使用小结

• 基本使用是基于node环境，首先我们需要下载node
• 当下载好node后 我们就可以使用包管理工具 npm 下载webpack 的包了
• npm install webpack -g 首先是全局安装一个webpack
• 之后我们就可以通过 命令行 webpack 打包文件的路径 输出文件的路径
• 但是此时我们输入的命令有些繁琐，我们可以在项目根目录下创建 webpack.config.js对webpack进行一些配置
• 这个文件 是用 commenJS的方式导出， 因此 module.exports = { }
• 常用的 对象属性有 entry output module resolve plugins devServer
• 其中 entry 和 output是 webpack打包的入口和出口，都是一个对象
• entry 入口对象中包含属性 path 是对打包的入口的文件路径进行一个配置
• output 对象中又包含了 path对象 filename对象 前者是 出口的文件存放的路径，后者是文件的名字，其次还可以有publicPath 用来规定出口文件统一存放的默认文件夹
• module 中则是对 loader的 一些配置，因此 首先有一个rules数组对象，其中包含了一个个 规则对象，一个个规则对象中又包含了
• test 匹配文件名，一般用正则表达式表示，不带冒号，use 使用的loader的配置，可以使一个对象，也可以是一个数组
• css less 配置方法基本一致，直接安装 css-loader style-loader less less-loader 然后配置就好了
• img的配置稍微特殊一些，首先也是需要加载loader的 因此下载 url-loader 然后匹配所有图片的后缀，然后use ：{}
• 此处图片是可以以文件的形式存储，还有一种就是 base64的格式，这里我们需要在 use中传入数组对象，然后先规定使用 loader：{}
  • 然后使用options:{ limit: 8192 , name: ‘img/[name].[hash:8].[ext]’ }
• 然后还有 babel-loader vue的loader
• plugin 的话是直接在plugins 中new 一下这个插件对象即可
• 如 html-webpack-plugin uglifyjs-webpack-plugin webpack-banner-plugin
• resolve中 extensions: [’.js’, ‘.css’, ‘.vue’], alias: { ‘vue$’: ‘vue/dist/vue.esm.js’ }
  • 前者是可以让项目进行webpack 引用的时候不需要添加上扩展名，后者是规定以vue结尾 的文件调用特定的文件来执行
• devServer contentBase: '/dist', port: 3000, inline: true 可以规定 端口等