webpack的作用

webpack可以帮助我们处理模块间的依赖关系，而且不仅仅是Javascript文件，css，图片，json文件等等在webpack中都可以当作模块来使用 gulp也可以用来打包，与webpack的区别？

gulp的核心是Task
- 我们可以配置一系列的task，并且定义task要处理的事务(如ES6、ts转化，图片压缩，scss转成css)
- 之后让gulp来依次执行这些task，而且让整个流程自动化
- 所以gulp被称为前端自动化工具
什么时候用gulp呢？
- 如果工程模块依赖非常简单，甚至没有模块化的概念
- 只需要进行简单的合并、压缩、就使用gulp即可
- 如果整个项目使用了模块化管理，而且相互依赖非常强，就可以使用更加强大的webpack了
webpack与gulp的区别？
- gulp更加强调的是前端流程自动化，模块化不是他的核心
- webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能是它附带的功能
webpack安装
安装webpack需要安装Node.js, Node.js自带了软件包管理工具npm
npm install webpack -g 全局安装与局部安装。
局部安装webpack。 --save-dev是开发时依赖，项目打包后不需要继续使用。局部安装的在package.json中定义。
直接在终端执行webpack命令，使用的是全局安装的webpack

 info.js
 export const name='aaaa';
 export const age = 18;
 export const height = 1.78;
 --------------------------------------------
 func.js
 export function sum(num1, num2){
   return num1+num2;
 }
 ----------------------------------------------
 main.js
 import {name, age, height, sum} from './info'
 console.log(name)
 console.log(age)
 console.log(height)
 ------------------------------------------------
 main.js是入口文件，webpack可以自动处理模块间的依赖
 webpack  src/main.js   dist/bundle.js
 在index.html中导入bundle.js即可

希望webpack命令简单一点（只输出一个webpack，它就知道去打包哪个文件,也知道在哪里输出），如何处理？

修改webpack.config.js

 const path= require('path')    //node语法
 module.exports = {
   enrty: '/src/main.js',
   output: {
     path: path.resolve(_dirname, 'dist'),    //动态获取绝对路径
     filename: 'bundle.js'
 }
 }

npm init 会创建package.json文件 package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

首先，会寻找本地的node_modules/.bin路径中对应的命令
如果没有找到，会到全局变量中寻找

loader

loader是什么？

webpack可以用来处理js代码，并自动化处理js之间相关的依赖
开发中不仅仅有js代码，也有css，图片，将es6转成es5，将ts转成js，将scss，less转成css，将jsx，.vue转成js文件等。对于webpack本身来说，这些转化是不支持的。那怎么办呢？给webpack扩展对应的loader就可以了。

loader的使用过程

使用npm安装需要使用的loader
在webpack.config.js中的module关键字下进行配置

使用css-loader

安装 npm install css-loader --save-dev
修改webpack.config.json

 module.exports = {
   module: {
     rules: [
       {
         test: /.css$/,    //匹配所有的css文件
         use: [ 'style-loader', 'css-loader' ]
       }
     ]
   }
 }

css-loader只负责将css文件进行加载，还需要style-loader将样式添加到DOM中。use中的顺序不能错，webpack读取loader时是从右向左的顺序读取的。为什么webpack加载loader是从右往左的

less文件处理

使用less-loader

 module.exports = {
     ...
     module: {
         rules: [{
             test: /.less$/,
             use: [{
                 loader: "style-loader" // creates style nodes from JS strings
             }, {
                 loader: "css-loader" // translates CSS into CommonJS
             }, {
                 loader: "less-loader" // compiles Less to CSS
             }]
         }]
     }
 };

###图片处理使用url-loader

 module.exports = {
   module: {
     rules: [
       {
         test: /.(png|jpg|gif)$/,
         use: [
           {
             loader: 'url-loader',
             options: {
               limit: 8192,
 //当加载的图片大小小于limit时，会将图片编译成base64的形式,
 //当加载的图片大小大于limit时，需要使用file-loader模块进行加载
               name: '/img/[name].[hash:8].[ext]'
             }
           }
         ]
       }
     ]
   }
 }

file-loader会把大于limit的图片压缩并使用hash改名后放到dist目录下，使用的时候需要配置一下webpack.config.js

 module.exports = {
   publicPath: 'dist'
 }

默认情况下，webpack会将图片名称修改为一个32位的hash值，看起来不太方便，但是我们开发中可能对图片名称有要求，而且所有图片都放在dist目录下比较乱。可以在options中添加以下选项：

img: 图片要打包到的文件夹
name: 获取图片原来的名字放到该位置
hash:8 ：防止图片名称冲突，依然使用hash，但是只保留8位
ext：使用图片原来的扩展名

将ES6转成ES5 babel-loader

npm install --save-dev bable-loader babel-core bable-preset-es 2015

 {
   test: /.m?js$/,
   exclude: /{node_modules|bower_components}/,
   use: {
         loader: 'babel-loader',
         options: {
                 presets: ['es2015']
 }
 }
 }

webpack配置Vue

Vue在运行时环境也要使用，所以不能只安装在开发环境中 npm install vue --save --save 运行时依赖 --save-dev 开发时依赖
webpack打包vue后的版本可能有两种

runtime-only-->代码中不可以有任何的template
runtime-compiler --> 代码中可以有template，因为有compiler可以用于编译template

 module.exports = {
   resolve: {
         alias: {
                   'vue$': 'vue/dist/vue.esm.js'
 }
 }
 }
 # import Vue from 'vue'
 导入Vue时，会到node_modules下面的vue/dist/vue.esm.js里面找，使用这个编译出来是runtime-complier的

template会覆盖el

 new Vue({
   el: '#app',
  template: `
     <div id="app">hello world<div>
 `
 })

如何使webpack能够识别vue文件？ npm install vue-loader vue-template-compiler --save--dev

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

plugin

plugin是什么？

插件，通常是用于对某个现有的架构进行扩展
webpack中的插件，就是对webpack现有功能的扩展，如打包优化，文件压缩等

loader和plugin的区别

loader主要用于转换某些类型，他是一个转换器
plugin是对webpack的扩展，它是一个扩展器

plugin的使用过程

通过npm安装需要使用的plugins
在webpack.config.js中的plugins中配置插件

添加版权声明的plugin

BannerPlugin，webpack自带插件

 const webpack = require('webpack')
 module.exports = {
   plugins: [
       new webpack.BannerPlugin('最终解释权归本人')
 ]
 }

打包html的plugin

src目录下有一个index.html文件，这是整个项目页面的入口，但是dist目录下没有这个文件，那么打包的js文件就失去了意义
所以需要将src下的index.html文件打包到dist文件夹中，可以使用HtmlWebpackPlugin
HtmlWebpackPlugin可以做以下事： ·1. 自动生成一个index.html文件（可以指定模板来生成）
1. 将打包的js文件，自动通过script标签插入到body中
安装HtmlWebpackPlugin插件 npm install html-webpack-plugin --save-dev
修改webpack.config.js

 const htmlwebpackPlugin = require('html-webpack-plugin')
 plugins: [
     new htmlwebpackPlugin({
           template: 'index.html'
 })
 ]

js压缩的plugin

项目发布前需要对js等文件进行压缩处理
使用npm install uglifyjs-webpack-plugin --save-dev

 const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
 plugins:[
   new uglifyJsPlugin()
 ]

js丑化后版本声明也会删掉

搭建本地服务器

webpack提供了一个可选的本地开发服务器，基于node.js搭建，内部使用express框架，可以实现让浏览器自动刷新显示我们修改后的结果。
安装npm install webpack-dev-server --save-dev
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： ~ contentBase: 为哪一个文件夹提供服务，默认是跟文件夹，我们写./dist ~port：端口号 ~inline：页面实时刷新 ~historyApiFallback：在SPA页面中，依赖HTML5的history模式
配置

 devServer: {
   contentBase: './dist',
   inline: true
 }

启动时增加一个参数(package.json中) "dev": "webpack-dev-server --open"

webpack配置分离

webpack配置时，有的配置是开发是需要的，如dev-server,有的配置是编译时需要的，如uglyfyjs-plugin，这时候就需要将webpack进行分离

base.config.js 开发和编译的公共配置
dev.config.js 开发时配置
prod.config.js 编译时配置 npm install webpack-merge --save-dev

 //dev.config.js
 const webpackMerge = require('webpack-merge')
 const baseConfig = require('./base.config')
 module.exports = webpackMerge(baseConfig, {
   devServer: {
         contentBase: './dist',
         inline: true
 }
 })

在package.json中指定用哪个配置文件

 scripts: {
   "build" : "webpack --config dev.config.js"
 }

webpack的一些知识