1. webpack打包原理：

把所有的依赖打包成bundle.js文件，通过代码分割成单元片段并按需加载。

2. bundle，chunk，module分别是什么：

bundle: 由webpack打包出来的文件；

chunk：webpack在进行进行模块依赖分析的时候由代码分割而出来的代码块；

module：开发中的单个模块。

3. 什么是loader，什么是plugin

loader用于加载一些资源文件，由于webpack只能打包符合common.js规范的js文件，而对于css样式文件，html网页结构文件，img静态资源无法进行加载打包，这是就需要使用对应的loader将资源转化进而进行加载打包。

plugin用来扩展webpack的功能，使webpack更加强大，不同于loader，plugin的功能更加丰富多样，比如对代码进行压缩打包，优化，比仅仅局限与对资源的加载。

• UglifyJsPlugin: 压缩代码
• HotModuleReplacementPlugin: 自动刷新
• HtmlWebpackPlugin 依据一个简单的index.html模版，生成一个自动引用你打包后的js文件的新index.html
• ExtractTextWebpackPlugin 它会将入口中引用css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中
• Tree-shaking 指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码
• 在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking，css需要使用Purify-CSS

4. 有哪些常见的loader，plugin？他们都是用来解决什么问题的？

• 常见的Loader：

  file-loader: 把文件输出待一个文件夹中，在代码中同归相对url去引用输出的文件；

  url-loader: 和file-loader相似，但是可以使用base64的方式把文件注入到代码中，可以减小文件的大小；

  image-loader: 加载并压缩图片文件；

  babel-loader: 将ES6转换成ES5；

  css-loader: 加载css，支持模块化、压缩、文件导入等特性；

  style-loader: 把css，代码注入到js中，通过操作DOM加载css；

  eslint-loader: 通过eslint检查代码格式，使代码整体变得很规范；

  source-map-loader: 加载额外的Source Map文件，以方便调试。

• 常用的plugin：

  define-plugin：定义环境变量；

  commons-chunk-plugin：提取公共的代码；

  uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码。

5. webpack-dev-server和HTTP服务器有什么区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，相比传统的HTTP服务对开发更加简单高效。

6. 什么是模块热更新

官方解释：使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制

这是webpack的一个功能，可以使代码修改后不用刷新页面就自动更新，提升开发效率

通过配置devServer的hot为true和hotModuleReplacement插件完成。

• 热更新原理：

  1.启动dev-server，webpack开始构建，在编译期间会向 entry 文件注入热更新代码；

  2.Client 首次打开后，Server 和 Client 基于Socket建立通讯渠道；

  3.修改文件，Server 端监听文件发送变动，webpack开始编译，直到编译完成会触发"Done"事件；

  4.Server通过socket 发送消息告知 Client；

  5.Client根据Server的消息（hash值和state状态），通过发送ajax请求到 Server端获取新的JS模块

  7.Client获取到新的JS模块后，会更新 modules tree并替换掉现有的模块；

  8.最后调用 module.hot.accept() 完成热更新。

7. webpack的入口文件怎么配置？多个入口怎么分割？

webpack.config.js:

const path = require('path');

module.exports = {
    // 入口文件的配置
    entry: {
        entry: './src/entry.js',
        entry2: './src/entry2.js',
    },
    
    // 出口文件的配置
    output: {
        // 出口的路径
        path: path.resolve(__dirname, 'dist'),
        // 输出的文件名称
        filename: '[name].js'
    },
    
    // 模块化
    module: [
        
    ],
    // 插件
    plugins：[
    
    ],
	// webpack开发服务功能
	devServer: {
        
    }
}

8. Webpack构建流程：

Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。

基础配置：参考官方配置示例

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill','./src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  // 排除模块，下面的模块不会编译到 webpack 打包后的文件中
    externals: {
    "vue":  "Vue",
    "vuex": "Vuex",
    "vue-router": "VueRouter",
    "lodash": "_",
    "echarts": "echarts"
    },
  plugins: [
    // 全局模块对象
    new webpack.ProvidePlugin({
      "Vue": "vue",
      "Vuex": "vuex",
      "VueRouter": "vue-router",
      "_": "lodash",
      "echarts": "echarts"
    })
  ],
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.scss/,
        loader: ['style','css','scss']
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

配置项说明：

entry: 指定了模块的入口，它让源文件加入构建流程中被webpack控制。

output: 配置如何输出最终的代码结果。

module: 配置各种类型的模块的处理规则和解析策略。

resolve: 配置webpack寻找模块的规则。

plugin: 配置扩展插件，扩展webpack的更多功能。

devServer: 配置DevServer，实现本地HTTP服务、模块热替换、source map调试等。

9. webpack的优势，与gulp的区别

• 优势：

1. webpack是以common.js的形式来书写脚本，对AMD/CMD也支持，方便对旧项目进行代码迁徙；
2. 开发便捷更替代部分grunt/gulp的工作，如：打包、压缩混淆、图片转换base64；
3. 能被模块化的比仅仅局限与js；
4. 扩展性强，插件机制完善。

• 与gulp的区别：

  webpack是一个模块打包器，基于入口的，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。

  grunt和gulp是基于任务和流，gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

Vue之Webpack入门及学习总结

Babel 是一个通用的多功能 JavaScript 编译器，但与一般编译器不同的是它只是把同种语言的高版本规则转换为低版本规则，而不是输出另一种低级机器可识别的代码，并且在依赖不同的拓展插件下可用于不同形式的静态分析。（静态分析：指在不需要执行代码的前提下对代码进行分析以及相应处理的一个过程，主要应用于语法检查、编译、代码高亮、代码转换、优化、压缩等等）

安装babel

//打开终端，输入命令
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

//安装完毕之后，再次输入命令安装
npm install --save @babel/polyfill

创建babel.config.js

const presets = [
            ["@babel/env",{
                targets:{
                    //最低支持的浏览器版本
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]

export导出/暴露

//export default默认导出，即外部JS文件import（引入）后可以使用的属性
// export default只能到处一次
export default {
  //属性
  a,
  //方法
  show
}
//按需要暴露（导出），不限制导出次数，引入名字需要跟暴露一样
export let s1 = ''s1''
export let s2 = ''s2''
export function say() {
  console.log(''say'')
}

import导入

//默认导入，默认导入无法获取按需暴露的内容
import m1 from ''./m1.js''

// 按需导入，名字要与导入文件内暴露的名字一样
//s2 as ss2中s2是原名字，通过as改别名
import m1, { s1, s2 as ss2, say } from ''./m1.js''

//如果导出文件没有默认导出，或者按需导出可以直接import执行js文件内容
import ''./m1.js''

使用npx执行js文件

npx babel-node ./index.js

Webpack基本使用

//初始化文件夹，会生成package.json文件
npm init -y

//创建src文件夹，存放代码文件

//这里举个例子，引入jquery，实际看需求，
//此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题
import $ from "jquery";


//安装webpack和webpack-cli
npm install webpack webpack-cli -D

//创建webpack.config.js 的配置文件用来配置webpack
module.exports = {
        //可以设置为development(开发模式)，production(发布模式)
        mode:"development"
    }

//修改项目中的package.json文件添加运行脚本dev
"scripts":{
        "dev":"webpack"
    }

//编译，得到转换低版本的js文件，默认的dist路径中生成的main.js文件，将其引入到html页面中。
npm run dev

设置webpack的打包入口/出口 （ 默认会将dist/main.js 作为默认的打包输出js文件 ）

//webpack.config.js内设置
module.exports = {
  //需要打包文件信息
  entry: path.join(__dirname, ''./src/index.js''),
  //输出打包信息
  output: {
    path: path.join(__dirname, ''./dist''), // 输出文件的存放路径
    filename: ''bundle.js'' // 输出文件的名称
  },
}

设置webpack的自动打包

//第一步
npm install webpack-dev-server --D

//第二部，修改package.json中的dev指令如下：
"scripts":{
                "dev":"webpack-dev-server"
}

//第三步，将引入的js文件路径更改为：（根目录下）
//这里的bundle.js是自己在webpack.config.js配置的输出文件名！
<script src="/bundle.js"></script>

//第四步 重新打包
npm run dev

//第五步 登录网址查看效果
http://localhost:8081/

配置html-webpack-plugin

因为自动打包每次都要访问 http://localhost:8081/还有找到对应的index.html，比较繁琐。所以配置html-webpack-plugin ​​​​​​后访问 http://localhost:8081/可以直接打开html文件。

//第一步
npm install html-webpack-plugin -D

//第二部在webpack.config.js文件引入包
const HtmlWebpackPlugin = require(''html-webpack-plugin'')
//第三步配置
const htmlPlguin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件（需要打开的html文件模板/源文件，但打开的不是这个文件）
    template: ''./src/index.html'',
    //设置生成的预览页面名称（另外生成一个template配置的html文件，在根目录，用于自动打开）
    filename: ''index.html''
})

//第四步导出(暴露)
module.exports = {
    plugins: [htmlPlguin],
}

测试时报错，引入后解决（查询说是webpack全局问题？待验证，可能是webpack安装了全局）
npm link webpack --save-dev

配置自动打包相关参数  (自动打包后vscode可以直接弹出页面)

//在package.json文件中配置
//自动打包后自动弹出网页
"dev": "webpack-dev-server --open",

//host设置IP，port设置端口
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",

webpack中的加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包 loader加载器包含：

1).less-loader

2).sass-loader

3).url-loader:打包处理css中与url路径有关的文件

4).babel-loader:处理高级js语法的加载器

5).postcss-loader

6).css-loader,style-loader

安装style-loader,css-loader来处理样式文件

没有安装前用webpack打包css文件会报错！

import ''./css/index.css''

//第一步
npm install style-loader css-loader -D

//第二步 配置规则：更改webpack.config.js的module中的rules数组
 module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:[''style-loader'',''css-loader'']
                }
            ]
        }

安装less,less-loader处理less文件

//第一步
npm install less-loader less -D

//第二步 导入less文件
import ''./css/index.less''

//第三步
        module : {
            rules:[
                {
                    test:/\.less$/,
                    use:[''style-loader'',''css-loader'',''less-loader'']
                }
            ]
        }

安装sass-loader,node-sass处理less文件

//导入文件
import ''./css/index.scss''

//下载包
npm install sass-loader node-sass -D

//配置文件
 module : {
            rules:[
                {
                    test:/\.scss$/,
                    use:[''style-loader'',''css-loader'',''sass-loader'']
                }
            ]
        }

安装post-css自动添加css的兼容性前缀（-ie-,-webkit-），即自动给那些有兼容性问题的样式自动加前缀

//下载包
npm install postcss-loader autoprefixer -D

//在项目根目录创建并配置postcss.config.js文件，内容如下；
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

//配置规则：更改webpack.config.js的module中的rules数组，在css配置项加''postcss-loader''
use:[''style-loader'',''css-loader'',''postcss-loader'']

打包样式表中的图片以及字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理使用url-loader和file-loader来处理打包图片文件以及字体文件

//下载包
npm install url-loader file-loader -D

//配置webpack.config.js的module中的规则
{
                //这里配置文件类型
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片
                use:"url-loader?limit=16940"
            }

打包js文件中的高级语法

在编写js的时候，有时候我们会使用高版本的js语法,有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码,所以需要安装babel系列的包

//安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D

//安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

//在项目根目录创建并配置babel.config.js文件，内容如下；
module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }

//配置规则：更改webpack.config.js的module中的rules数组
{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }

.Vue单文件组件

传统Vue组件的缺陷： 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中) 没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案： 使用Vue单文件组件，每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成

1).template组件组成的模板区域

2).script组成的业务逻辑区域

3).style样式区域

<template>
    <div>
        <h1>你好vue</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {};
    }
}
</script>

<style scoped>
    h1{
        color: red
    }
</style>

配置.vue文件的加载器 ​​​​​​​

//下载包
npm install vue-loader vue-template-compiler -D

//配置规则：更改webpack.config.js的module中的rules数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

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

在webpack中使用vue ​​​​​​​

//下载包
npm install vue -S

//在js文件中引入
import Vue from ''vue''
//导入vue单文件
import Vuw from ''components/app.vue''

const vm=new Vue({
    el:''#app'',
    //渲染指定组件
    render:h=>h(app)
})

//vue操作区域，在html页面中
<div id="app"></div>

使用webpack打包发布项目 ​​​​​​​

//配置package.json
 "scripts":{
        "build":"webpack -p"
    }

//运行打包命令
npm run build

//生成的dist文件夹就是打包出来的文件夹

Vue脚手架 ​​​​​​​   Vue脚手架可以快速生成Vue项目基础的架构。

使用命令创建Vue项目 ​​​​​​​

//安装3.x版本的Vue脚手架：
npm install -g @vue/cli

//使用命令创建Vue项目
vue create my-project

//选择Manually select features(选择特性以创建项目)

//勾选特性可以用空格进行勾选。

Use history mode for router? (Requires proper server setup for index fallback in production)
//是否选用历史模式的路由：n

//ESLint选择：ESLint + Standard config

//何时进行ESLint语法校验：Lint on save

//babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)

//是否保存为模板：n

//切换路径
$ cd my-project
//运行
$ npm run serve
//得到地址
http://localhost:8081/

基于ui界面创建Vue项目 ​​​​​​​

//执行命令后打开操作页面
vue ui

基于2.x的旧模板，创建Vue项目 ​​​​​​​

//下载包
npm install -g @vue/cli-init
//创建
vue init webpack my-project

分析Vue脚手架生成的项目结构 ​​​​​​​

node_modules:依赖包目录

public：静态资源目录

src：源码目录

src/assets:资源目录

src/components：组件目录

src/views:视图组件目录

src/App.vue:根组件

src/main.js:入口js

src/router.js:路由js

babel.config.js:babel配置文件

Vue脚手架的自定义配置 ​​​​​​​

通过 package.json 进行配置 [不推荐使用]

  "vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }

通过单独的配置文件进行配置，创建vue.config.js ​​​​​​​

 module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

Element-UI的基本使用 ​​​​​​​

//下载包
npm install element-ui -S
//导入组件库
import ElementUI from "element-ui";
//导入相关样式
import "element-ui/lib/theme-chalk/index.css";
//配置vue插件
Vue.use(ElementUI)

//配置完成后就可以在element-ui官网复制代码到xxx.vue单文件组件中

基于图形化界面自动安装

//通过 vue ui 启动界面
//在插件面板下载 vue-cli-plugin-element
//用vscode打开项目，在app.vue内添加element-ui官网案例代码即可看到效果

Webpack 4 学习总结

一、安装配置

• 【前提】安装node.js环境

  【官网下载】https://nodejs.org/zh-cn/
  安装教程不赘述

• 创建项目文件夹

  例如创建如下文件夹webpack_demo1

  

• 创建配置项

  npm init -y

  生成一个package.json文件 如下图

  

• 全局安装webpack （不推荐，进行下一步操作）

  npm install webpack -g

• 局部安装webpack(推荐)

  npm install webpack --save-dev

  • 另外，webpack 4要求安装包

  npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

以下表示安装成功

• 创建入口文件

  ./src/index.js

  

  任意编写index.js文件内容用于测试

• 配置生产和开发模式

  打开package.json文件添加如下脚本

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }

  

• 现在运行：

  npm run dev

  生成dist/main.js ，其中 main.js 没有压缩

  npm run dev 表示开发模式

  

  npm run build

  此时的main.js 被压缩 ，这便是生产模式

  

• 接下来看看打包的js文件是否能够使用

  • 创建index.html 引入打包好的main.js

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./main.js" charset="utf-8"></script>
  </head>
  <body>
  
  </body>
  </html>

• 打开浏览器调试

  

输出结果表示打包成功，大功告成 ！！！

二、使用配置文件进行打包

上一讲中我们打包没有用到webpack.config.js配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。

• 根目录下新建一个webpack.config.js文件 （记载配置信息）

  

• 配置文件

   const path = require(''path'');
  
   module.exports = {
     entry:''./public/index.js'',
     output:{
       path:path.resolve(__dirname,''build''),
       filename:''bundle.js''
     }
   }

  字段	意义
  entry	入口，所需打包的文件的路径
  output	出口
  path	文件打包后存放的路径
  path.solve()	将路径或者路径片段的序列处理成绝对路径
  _dirname	表示当前文件所在目录的绝对路径
  filename	打包后文件的名称

• 按照配置项新建一个入口文件public/index.js

  

• 运行npm run dev

三、配置入口和出口的进阶使用

一、单出口形式

webpack.config.js

const path = require(''path'');


module.exports = {
  //单出口形式
  entry:[''./public/index.js'',''./public/index2.js''],//有多个文件
  output:{
    path:path.resolve(__dirname,''build''),
    filename:''bundle.js''
  }
}

• 运行npm run dev

  生成唯一的打包文件 bundle.js

  

二、多出口形式

`webpack.config.js`

const path = require(''path'');

module.exports = {
  //多出口形式
  entry:{
    entryOne:''./public/entryOne/index.js'',
    entryTwo:''./public/entryTwo/index.js'',
  },
  output:{
    path:path.resolve(__dirname,''build''),
    filename:''[name].js''
  }
}

​

• 文件结构

  

• 运行npm run dev

  • 生成两个打包文件

    

四、配置webpack-dev-server

一、了解 webpack-dev-server

• webpack-dev-server用来配置本地服务器
• 为 webpack 打包生成的文件提供web服务
• 自动刷新和热替换（HMR）

二、安装webpack-dev-server

npm install --save-dev webpack-dev-server

三、 配置webpack.config.js文件

devServer:{
        contentBase:''./dist'',  //设置服务器访问的基本目录
        host:''localhost'', //服务器的ip地址
        port:8080,  //端口
        open:true  //自动打开页面
}

四、配置package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
 }

五、运行命令

npm run dev 打包文件

npm run start 打开服务器

五、打包css

• 安装loader

  npm install style-loader css-loader --save-dev

• 配置loader

  • 在webpack.config.js文件里配置module中的rules，如下：

    • test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
    • use 属性，表示进行转换时，应该使用哪个 loader。

    module.exports = {
        /*入口和出口文件可以不用配置，默认*/
    
        module:{
          rules:[
            {
              test:/\.css$/,
              use:[''style-loader'',''css-loader'']//引入的顺序至关重要,不可改变
            }
          ]
        }
    }

• 测试是否打包成功

  • 在src下创建index.css文件

    

  • 在index.js中引入index.css文件

    require(''!style-loader!css-loader!./index.css'');

    

  • 进行打包后运行 npm run dev（之前配置好，详见第一篇文章：webpack4 基础配置）

    红色的背景，控制台输出hello

    

------------

六、使用babel编译ES6

• babel转化语法所需依赖项：

  • babel-loader： 负责 es6 语法转化
  • babel-core： babel核心包
  • babel-preset-env：告诉babel使用哪种转码规则进行文件处理

• 安装依赖

  npm install babel-loader @babel/core @babel/preset-env --save-dev

• 配置webpack.config.js文件

        {
        test:/\.js$/,
        exclude:/node_modules/,
        use:''babel-loader''
      }

• 新建 .babelrc 文件配置转换规则

  {
    "presets":["@babel/preset-env"]
  }

• 或者直接在webpack.config.js文件中配置规则

        {
        test:/\.js$/,
        exclude:/node_modules/,
        use:{
            loader:''babel-loader'',
            options:{
              presets:[''@babel/preset-env'']
            }
        }
      }

  ---

七、提取分离打包css

前面讲过 将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。

• 安装插件min-css-extract-plugin

  npm install mini-css-extract-plugin --save-dev

• 配置webpack.config.js

  • 引入插件

    const MiniCssPlugin = require("mini-css-extract-plugin");

  • rules 设置

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

  • plugins 设置

      new MiniCssPlugin({
        filename:''./css/[name].css''
      })
    

    截图

    

• 运行命令打包

八、压缩优化css

压缩css,去除注释

• 安装插件

  npm install --save-dev optimize-css-assets-webpack-plugin

• 配置webpack.config.js

  • 头部引入插件

    const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") ` 

| 参数 | 意义 |
| ------------------------- | ------------------------------------------------------------ |
| assetNameRegExp | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g |
| cssProcessor | 用于压缩和优化CSS 的处理器，默认是 cssnano. |
| cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{} |
| canPrint | 表示插件能够在console中打印信息，默认值是true |
| discardComments | 去除注释 |

• 在plugins模块引入

   new OptimizeCssAssetsPlugin({
         assetNameRegExp:/\.css$/g,
         cssProcessor:require("cssnano"),
         cssProcessorPluginOptions:{
           preset:[''default'',{discardComments:{removeAll:true}}]
         },
         canPrint:true
       })

• 运行打包命令之后就可以压缩

  webpack --mode development

webpack4学习总结

webpack4学习记录

webpack中文文档指南

写这篇对webpack的基本概念和安装等简单操作省略,主要是记录在跟着官方文档学习webpack时的一些要点。

　　前端写代码时，HTML页面中用<script>标签引入的一些外部js文件，来支持代码运行，这些js文件就是项目的“依赖”。webpack就是用了打包管理这些依赖的工具。

• 为什么是npm run build?

  　　
  　　 你用vue-cli的时候，总是用npm run build来打包写好的代码，然后代码很成功的被打包到了dist目录下。这些都是因为webpack在配置文件webpack.config.js中设置好的。
  　　

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

　　设置好出口和入口文件的名字位置等，在package.json中添加npm脚本命令build，以后你用npm run build，其实就是执行了webpack。

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },

• 管理非JavaScript文件

　　
　　webpack打包是很厉害,不过它本身只能识别JavaScript文件,对于前端开发中的css,图片,字体等静态资源,就需要各种loader来将其转化为最终依赖图可以引用的模块。
　　loader需要配置两个选项：test和use，tset确定需要loader转化的文件，use确定用哪个loader转化，在使用之前，外部loader需要npm intsall一下。
　　　　

     module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              ''style-loader'', 
              ''css-loader''
            ]
          },
          {
            test: /\.(png|jpg|svg|gif)$/,
            use: [
              ''file-loader''
            ]
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
              ''file-loader''
            ]
          }
        ]
      }

• 我原来用<script src=''xxx.js''>也可以啊

  　　一个项目中有多个js文件，如果需要在一个js中用到另一个js的方法，在没有ES模块这些东西时，需要把整个js文件引入到html页面中，而且顺序不能出错，好麻烦的。但是用了webpack，它就可以自己去根据一个入口js寻找依赖，再配合模块化的写法，导入你需要的功能，这样就可以方便大家更好的组织代码。
  

　　　　　　　　　　　　　　不用webpack，目录结构复杂后会很烦...
　　　　

　　
　　　　　　　　　　　　　　　用了webpack，超清晰!

• 打最干净的包！

　　　　开发时每次打包，可能都会有一些弃用的东西，如果要保持打出的dist是最小的包，就使用下面这两个插件来管理输出。

        const HtmlWebpackPlugin = require(''html-webpack-plugin'')
        const CleanWebpckPlugin = require(''clean-webpack-plugin'')
        module.exports = {
          entry: {
            app: ''./src/index.js'',
            print: ''./src/print.js''
          },
          plugins: [
            new CleanWebpckPlugin([''dist'']),
            new HtmlWebpackPlugin({
              title: ''Output Management''
            })
          ],

Webpack学习

Webpack学习笔记

前端模块化

在了解Webpack之前，必须说一下前端模块化的概念。
随着前端开发规模，以及代码逻辑复杂性的提高，在大型项目的开发中，大量forPage的js文件引用不仅显得很蠢且冗余，也给后期代码维护带来的很大的成本。所以引入了模块化开发的概念。
模块化开发，一个模块就是一个实现特定（且相对独立）功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发的四点好处

1. 避免变量污染与命名冲突
2. 提高代码（模块）的复用率
3. 提高可维护性
4. 依赖关系的统一管理

Webpack的使用场景

目前，前端通用的模块化开发方式，以及目前我们项目组使用的Vue框架，以及Scss，less等CSS预处理器，这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为Webpack类的工具的出现提供了需求。

现在可以回答这个问题了，什么是Webpack?

用我自己的理解方式来说，Webpack就是项目各模块的打包工具。它通过分析项目结构，寻找各模块之间的依赖关系，将那些浏览器无法直接识别的文件（如.vue），转换并统一打包成浏览器可识别的文件（如.js）

Webpack的工作方式？

把项目当做一个整体，通过一个给定的主文件/入口文件（如：main.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

Webpack的安装

//全局安装webpack
npm i -g webpack
//安装到项目目录
npm i --save-dev webpack

Webpack的配置项

1. 生成Source Maps（方便调试）

通过打包完成的js文件，在调试的时候简直是灾难，难以找出出错位置与对应的代码位置，而Source Maps 就可以为我们解决这个问题。它提供了一种对应打包文件和源文件的方法，来方便我们进行调试。
在Webpack的配置文件中配置Source Maps,需要配置devtool，共有四种配置选项：

上述选项从上到下打包速度越来越快，对打包后文件的执行影响也越来越大，因此在中小型项目中，eval-source-map是一个很好的选项，注意只有在dev环境下使用它们，在prod环境下需要关闭该选项。

2. 实现热更新

Webpack提供一个可选的本地开发服务器webpack-dev-server，这个本地服务器基于node.js构建

3. Loaders

Webpack相当重要的功能，通过使用不同的loader,Webpack可以使用外部工具来处理不同格式的文件，比如scss转css，（ES6，ES7的JS文件）转为现代浏览器兼容的JS文件
Loaders需要单独安装并且需要在webpack.xxx.config.js中的modules关键字下进行配置

介绍之Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

• 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
• 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX

由于Babel的配置选项非常多，经常会把babel的配置选项放在.babelrc的配置文件中

介绍之css-loader 和 style-loader

二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入Webpack打包后的JS文件中

• 关于CSS modules
  把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。具体代码如下

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: ''[name]__[local]--[hash:base64:5]'' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};

介绍之CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，

你现在可能都已经熟悉了，在webpack里使用相关load请输入代码ers进行配置就可以使用了，以下是常用的CSS 处理loaders:

• Less Loader
• Sass Loader
• Stylus Loader

4. 插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效
注意Plugins与Loaders的区别：

• Plugins是在整个构建过程中生效的，拓展Webpack功能的（比如压缩打包后的文件，添加版权声明等等）
• Loaders是在文件打包过程中加入的外部脚本/工具，用于处理特殊的源文件（.vue,JSX，SCSS,LESS）

上一份比较完整的conf代码：

// webpack.prd.config.js
const webpack = require(''webpack'');
const HtmlWebpackPlugin = require(''html-webpack-plugin'');

module.exports = {
    entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devtool: ''null'', //注意修改了这里，这能大大压缩我们的打包代码
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {  //Loaders配置
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [  //插件配置
        new webpack.BannerPlugin(''版权所有，翻版必究''),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin() //热加载插件
    ],
};

感谢zhangwang大佬的入门 Webpack，看这篇就够了，本篇学习攻略大部分来源于他的文章指导，感谢~

关于webpack学习总结和webpack基础知识的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Vue之Webpack入门及学习总结、Webpack 4 学习总结、webpack4学习总结、Webpack学习等相关知识的信息别忘了在本站进行查找喔。