webpack学习、es6转es5、打包html、压缩js、搭建本地服务器代码页面实时更新、等。。。

什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

gulp和webpack有什么不同

gulp更强调的是前端了流程的自动化,模块化不是它的核心。
webpack更强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能。

webpack安装

webpack模块化打包,为了可以正常运行,必须依赖node环境,Node.js自带了软件包管理工具npm。
1.全局安装webpack(指定3.6.0,因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

2.创建文件夹

在文件夹npm init -y
接着 npm install

//局部安装webpack
npm install webpack@3.6.0 --save-dev

3.配置webpack.config.js文件

const path = require('path') //在node包里面找

module.exports = {
  entry: './src/main.js', //入口
  output: { //出口
    // __dirname 当前文件所在的绝对路径,node里面的东西
    path:path.resolve(__dirname,'dist'), //动态获取路径要写绝对路径
    filename:'bundle.js'
    
  },
}

现在可以使用webpack进行打包,我们也可以在package.json里面配置一个脚本

然后就可以使用npm run build 进行打包了

webpack使用css文件的配置

//1.下载
//加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码
npm install --save-dev css-loader
//将模块导出的内容作为样式并添加到 DOM 中
npm install --save-dev style-loader

2.下写好的js引入入口文件main

require("./css/normal.css")
//import css from "./css/normal.css";

3.配置webpack.config.js
use: [‘style-loader’, ‘css-loader’],时style-loader必须在前,因为webpack在读取使用的loader过程中,是按照从右向左的数据读取的。

 module: {
    rules: [
      {
        test:  /\.css$/i,
        // css-loader只负责将css文件进行加载
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

4.现在就可以执行npm run build使用css文件的配置
如果有UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function报错

请参考https://blog.youkuaiyun.com/qq_42449963/article/details/109466452

webpack-less文件的处理

//1.下载
npm install less less-loader@5.0.0 --save-dev

2.在css文件夹写less,然后在入口文件进行依赖

require("./css/special.less")

3.配置webpack.config.js

  module: {
    rules: [
      {
        test:  /\.css$/i,
        // css-loader只负责将css文件进行加载
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },

然后npm run build或webpack

webpack图片文件的处理

//1.下载
npm install url-loader --save-dev

2.使用图片
3.配置webpack.config.js

当加载的图片,小于limit时,会将图片编译成base64字符串形式
当加载的图片,大于limit时,需要使用file-loader模块进行

 module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//8kb
            },
          },
        ],
      },
    ],
  },

4.当加载的图片大于limit时,执行以下步骤,小于无需执行

npm install file-loader@4.0.0 --save-dev

此时的图片就会在dist文件夹生成(图片名为32位的hash值)但是没有引用,需要在webpack里,在url前面加上一个对应路径

如果想要规范图片的名字应在options添加name属性，此时生成的时在dist文件夹下img文件夹下 图片名字.8位hash值.图片后缀组成的

 use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8196,//8kb
              name:'img/[name].[hash:8].[ext]'
            },
            
          },
        ],

5.最后 npm run build 或 webpack

webpack-ES6转ES5的babel

//1.下载
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2.配置webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      // exclude:排除,在对es6转化时,排除这些
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

3.最后 npm run build 或 webpack

webpack使用vue的配置过程

//1.下载
npm install vue --save  //运行时依赖

2.在mian中引入vue挂载实例main.js

import Vue from 'vue'
const app = new Vue({
  el:"#app",
  data:{
    message:"hello webpack"
  }
})

3.在index.html里面使用

<div id="app">
    <h2>{{message}}</h2>
  </div>

4.然后运行打包 npm run build,发现报错

原因为是vue在构建发布版本时,构建了两类版本

runtime-only 使用这个版本,不可以有任何template,(html中的div相当于template)
runtime-compiler 代码中可以有template,因为有compiler可以用于编译template

5.解决方案在webpack.config.js中配置
解决方案1：

resolve:{
    // alias别名 
    alias:{
      'vue$':'vue/dist/vue.esm.js'//这个路径是在node_modules里
    }
  }

然后npm run build 或webpack 打包,就可以使用vue了
解决方案2：main.js，只需要在入口js文件改变vue的导入路径即可

import Vue from 'vue/dist/vue.esm.js'
const app = new Vue({
  el:"#app",
  data:{
    message:"hello webpack"
  }
})

el和template的区别

如果同时有el和template,template会代替el,
这里面用到了vue文件需要下载加载器

//1.下载
npm install vue-loader@13.0.0 vue-template-compiler --sace-dev

main.js

// import App from './vue/app.js'
  import App from './vue/App.vue'

  const app = new Vue({
    el:"#app",
    template:"<App/>",
   components:{
     App
   }
  })

2.配置webpack.config.js

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

3.App.vue

<template>
   <div>
  <h2 class="title">{{message}}</h2>
  <button @click = 'btnClick'>按钮点击</button>
  </div>
</template>

<script>
export default {
data() {
    return {
      message:"hello webpack"
    }
  },
  methods: {
    btnClick(){

    }
  }
}
</script>

<style scoped>
.title{
  color: yellow;
}

</style>

这样就把写在main里面的内容全部抽离出来了。

plugin

横幅

在webpack.config.js中配置

const webpack = require('webpack')
 plugins: [
     // 横幅
    new webpack.BannerPlugin('最终版权归xx所有'),
  ]

打包之后就会出现在打包文件的头部

plugin打包html文件(HtmlWebpackPlugin)

//1.下载
npm install html-webpack-plugin@3.2.0 --save-dev

2.在webpack.config.js中配置

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

要把这一块注释掉

可以把index.html里面的src引入删除掉,打包之后会自动生成

js压缩的plugin(uglifyjsWebpackPlugin)

//1.下载
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2.在webpack.config.js中配置

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

 plugins: [
    new UglifyjsWebpackPlugin()
  ]

然后进行打包,发现dist里面的js文件已经被压缩了

webpack-dev-server搭建本地服务器

首先要把html打包到dist文件夹

//1.下载
npm install webpack-dev-server@2.9.1 --save-dev

2.配置webpack.config.js文件

devServer:{
contentBase:'./dist',
inline:true //是否实时监听
}

3.修改package.json

 "dev": "webpack-dev-server --open"
 

然后npm run dev就可以启动本地服务实时更新了, --open时在运行时自动打开页面

webpack配置文件的分离

在根文件夹下面创建build文件夹

分离webpack.config.js
base.config.js放公共用的东西
dev.config.js放开发时用的东西
prod.config.js放生产时用的东西

1.base.config.js

// 放一些公共的
const path = require('path') //在node包里面找
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/main.js', //入口
  output: { //出口
    // __dirname 当前文件所在的绝对路径,node里面的东西
    path:path.resolve(__dirname,'../dist'), //动态获取路径要写绝对路径
    filename:'bundle.js',
    // publicPath:'dist/' //在url前面加上一个对应的路径
    
  },
  module: {
    rules: [
      {
        test:  /\.css$/i,
        // css-loader只负责将css文件进行加载
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },{
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片,小于limit时,会将图片编译成base64字符串形式
              // 当加载的图片,大于limit时,需要使用file-loader模块进行
              limit: 8196,//8kb
              name:'img/[name].[hash:8].[ext]'
            },
            
          },
        ],
      },
      {
        test: /\.m?js$/,
        // exclude:排除,在对es6转化时,排除这些
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ],
  },
  // resolve:{
  //   // alias别名
  //   // git commit -m 
  //   alias:{
  //     'vue$':'vue/dist/vue.esm.js'
  //   }
  // }
  // 横幅
  plugins: [
    new webpack.BannerPlugin('最终版权归xx所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ],
  // devServer:{
  //   contentBase:'./dist',
  //   inline:true  //是否实时监听
  // }
}

2.dev.config.js

// 开发时
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports =webpackMerge.merge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true  //是否实时监听
  }
})

3.prod.config.js

// 生产时
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig,{
  plugins: [
    new UglifyjsWebpackPlugin() //压缩js
  ]
})

dev.config.js和prod.config.js中都用到了base.config.js里面的东西所以说他们两个要分别和base.config.js合并代码

//1.下载
npm install webpack-merge --save-dev

2.然后在dev.config.js和prod.config.js引入使用,向上看代码写法
3.然后最后可以删除掉了根目录下的webpack.config.js，然后再package.json里面配置一些东西
package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

这时候npm run build 执行的就是base.config.js和prod.config.js里面的东西
npm run dev执行的就是base.config.js和dev.config.js里面的东西

最后npm run build 发现打包的文件跑到了build文件夹下
要修改以下base.config.js里面打包的路径,因为之前的路径是安装webpack.config.js在根目录时的情况