webpack核心用法，为什么要使用webpack

一：为什么使用webpack

1. 代码转换、文件优化、代码分割、模块合并、自动刷新、等等

2. webpack上手

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

     <!--

     模块化：

      -->

      <script src="../dist/main.js"></script>

</body>

</html>

使用：

1安装webpack

 npm install webpack webpack-cli -g

##### 2webpack初体验

在创建项目的使用，我们回顾一下我们写vue和react项目，是不是都有一个模块化的思想，将一个方法，一个组件单独文件中进行处理，在引入到我们想要的文件中。

案例目录：webpack1

问题：在文件的浏览器中不用使用这些模块化

解决方法：使用webpack进行打包处理

在终端执行 webpack  =>生成 dist目录

代码：webpack2

3webpack的配置

(1) 在项目目录中创建一个webpack.config.js文件

const path = require('path');

module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, 'dist'), //不是绝对路径

    filename: 'index.js',

  },

};

（2）我们要向和vue,react，通过命令产生打包文件

   "build":"webpack"

4:webpack主文件（依赖图）

就是这个src/index.js 文件

这个文件就是vue.中的main.js文件，这个里面引入的所有代码都会被执行

5：处理loader

//1webpack为什么需要loader
//就是webpack处理的文件，不是js,文件类型，都需要loader来进行处理
//2loader是什么？
//就是用来辅助webpack,解析不是js文件的方法

案例一：处理css-loader

//1 创建元素

//例子登录

function Login(){

    //创建元素

    let oH = document.createElement('h2')

    oH.innerHTML = '你好同学' //添加内容

    oH.className ='title'

    return oH

}

//放到body上面去

document.body.appendChild(Login())

2创建css样式

// 引入我们的css

import '../css/login.css' //报错因为webpack不能处理 css为文件

//例子登录

function Login(){

    //创建元素

    let oH = document.createElement('h2')

    oH.innerHTML = '你好同学' //添加内容

    oH.className ='title'

    return oH

}

//放到body上面去

document.body.appendChild(Login())

解决方法

1 安装css-loader

npm install css-loader

2 配置webpack解析的文件

 module: {

    rules: [

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

    ],

  },

发现页面样式没有效果，就是我们刚刚的配置，让webpack，可以解析css文件，但是没有使用

在安装一个loader =》style -loader

  module: {

    rules: [

      // { test: /\.css$/, use: 'css-loader' } //单个

      //注意又有一个问题： use执行的顺序  从右向做

      { test: /\.css$/, use:[ 'style-loader','css-loader'] }

    ],

  },

案例处理less文件

import '../css/login.less'

 //创建了一个标签

function ohs(){

  let oh = document.createElement('h2')

 oh.innerHTML ='你好'

  oh.className ='title'

  return oh

}

//webpack 只能处理.js 文件 =》其他的文件不能处理

// 提供的loader?这个loader是什么？loader作用？

//就是一个webpack中用来解析成webpack认识的文件

//例子=》css

//安装 css-loader

//配置

document.body.appendChild(ohs())

需要安装less-loader ,webpack才能解析这个文件

  module: {

    rules: [

      // { test: /\.css$/, use: 'css-loader' } //单个

      //注意又有一个问题： use执行的顺序  从右向做

      { test: /\.css$/, use:[ 'style-loader','css-loader'] },

      //注意这里的解析方式

      // less=>css =>在通过style-loader使用样式

      { test: /\.less$/, use:[ 'style-loader','css-loader','less-loader'] }

    ],

  },

6：webpack中babel的使用

作用：就是将es6的语法变成 es5的语法

案例将es6箭头函数变成es5的语法

var title= '小明'

 const show =()=>{

   console.log(title);

 }

 show()

1安装babel

npm install --save-dev @babel/core @babel/cli

npm install babel-loader

npm install @babel/plugin-transform-arrow-functions

2配置规则

    // 处理js文件

    mode:'development',

      {

        test: /\.js$/,

        // 需要使用babel提供的几个插件

        // use:[ 'babel-loader']

        use: {

          loader: "babel-loader",

          options: { //选项

            plugins: [

              '@babel/plugin-transform-arrow-functions'

            ]

          }

        }

      }

7：webpack中plugins的使用(插件的使用)

我们的这个模板是需要自己写的，=》index.html，

我们通过使用插件自动创建模板

1安装插件

npm install html-webpack-plugin

2webpack配置插件

  //配置插件=>在modult.exports上添加一个属性   plugins

let HtmlWebpackPlugin = require('html-webpack-plugin') //类

  plugins:[ //数组可以放多个

    new HtmlWebpackPlugin()

  ]

8：webpack加载vue文件

1 安装相关依赖

npm install vue-template-compiler

npm install vue@2.6.14

npm install vue-loader@15.9.8

2 创建根组件

<template>

     <div class="title">

         <h2>{{msg}}</h2>

     </div>

</template>

<script>

export default {

    data(){

        return{

            msg:'你好同学'

        }

    }

}

</script>

<style scoped lang='less'>

   .title{

       color:red;

   }

</style>

3在index.js中创建vue实例

//main.js入口主文件

import Vue from 'vue'

import App from './App.vue'

new Vue({

    render:h=>h(App)

}).$mount('#app')

4配置解析vue-loader

 const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

    ],

          //配置插件

  plugins:[

    new HtmlWebpackPlugin(),

    new VueLoaderPlugin()

  ]

webpack 我们需要掌握的知识：

1 知道webpack 作用：

2知道微博pack 使用 loader 和插件

3 你在项目中有没有配置webpack, 配置过

1）代理 devServer

2）通过webpack 处理性能优化的 =》 js ,css , 图片，等等

4webpack 执行流程