webpack-总结

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1.grunt
2.gulp 因为流操作 干掉了 grunt
3.Browserify
4.Webpack
AMD
CMD
es module

webpack
1.webpack可以将其他类型文件通过loader转换为另一个类型文件
2.webpack可以解决文件之间的相互依赖关系

webpack脚手架安装

1.首先全局安装
如果用了 nvm管理node 下面的yarn的全局安装会出问题 建议使用cnpm安装

$ npm install webpack webpack-cli -g
$ cnpm install webpack webpack-cli -g
$ yarn add webpack webpack-cli global

2.再局部安装

$ npm install webpack webpack-cli -D
$ cnpm install webpack webpack-cli -D
$ yarn add webpack webpack-cli -D

Webpack 使用

默认源代码开发目录为： src

默认的入口文件名称为： src/index.js

默认出口目录为： dist

默认出口打包文件名称为： main.js

通过mode来设置是哪个环境下打包使用

1.终端命令行使用

• 终端运行 webpack
  • 当我们局部安装了webpack webpack-cli后，发现运行webpack报错命名找不到
    • 解决： 全局安装webpack webpack-cli
  • 默认生成环境打包
  • webpack --mode development/production 开发环境/生产环境打包

2.配置文件使用

• 默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的
• 运行 webpack 命令就会自动的去寻找这个 文件
• webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

1. 基础功能 ： 入口 出口 文件配置
2. 转换器： loader
3. 插件: plugin
   单页面配置 vs 多页面配置
   单页面配置指的只有一个入口一个出口的项目 【 推荐 】
   多页面配置指的是有多个入口多个出口的项目
   

单页面配置

1.1基础功能

/* 
  webpack配置文件
  也是Node.js文件
  这个文件也是一个独立的 Common.js 模块
*/

const path = require('path')

// 1. 创建模块

const webpackConfig = {
  entry: './src/index.js', //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}

// 2. 导出模块

module.exports = webpackConfig

1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以

1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

举例： 实现css的使用

  /* ------------------------------- 转换器 ------------------------------ */
  // 在webpack.config.js中做如下配置：
  module: { //这里用来存放转换器的配置
    rules: [
      // {} //每一个对象就是一个转换器的配置
      {//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
        // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
      }
    ]
  },

1.4 配置前端静态服务器

//需要自动刷新： webServer 搭建前端开发服务器
    cnpm install webpack-dev-server -g | -D
    参数:
        命令行
        webpack-dev-server --port 8088 --open --mode development

        写到webpack.config.js配置文件:

        devServer: {//和module同级
            port: 8088,
            open:true
        }

        终端运行方式2: webpack-dev-server
    
    把运行命令放到package.json文件:    devServer可以不要了
        "scripts":{
            "dev": "webpack-dev-server  --port 8088 --open"
        }

        终端: npm run dev