webpabe的使用小结

1. 前端的工程化工具

• grunt
  • 资源打包
  • 单元测试
• gulp
  • 流式操作工具
  • 资源打包
• webpack 【 主流 】
  • 资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。
  • 可以自动解决模块化依赖问题
  • es6模块化

2. webpack.config.js配置

• 全局
  cnpm i webpack webpack-cli -g
          yarn add webpack webpack-cli global
      cli 命令行工具 打包会依赖cli

• 本地（项目目录）
      npm i webpack webpack-cli --save-dev 开发依赖

项目： 优先找本地  ----》 全局

3.概念：
            webpack是一种静态编译工具(预编译)
            入口文件、出口、转换器、插件

webpack–打包

development： 开发环境

production； 生产环境

webpack  --mode development  会自动找src/index.js 到 dist/main.js
    要求设置开发模式|生产模式

webpack 入口地址 --mode development  指定出口

webpack aa/index.js --mode development  bb/index.js  自定义

#####； 1. 单页面
- 入口文件

 entry: 相对路径

      - 出口文件
          - 配置hash      

 output: {
                  path: path.resolve(__dirname,'dist'),
                  filename: 'js/app_[hash:6].js'
                }

      - 转换器： 将某一类型的文件转成另一个类型文件的一个工具，我们常用loader来表示
        - 举例： css文件
        - 所有的loader用一个module的配置项表示

  module: {
                rules: [
                  {} //每一个对象表示一个类型文件的转换器
                ]
              }

书写一个单页面转换，例：

const path = require('path')
module.exports = {
    //入口文件
    //入口文件相对路径（网络路径）
    entry: './src/index.js', //单文件
  

    //出口文件
    //output:{path,filename}path是出口的磁盘路径，filename是出口目录中的文件名称
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: `js/app_[hash:6].js`也可以写上":"加数字，添加哈希值。
         filename: 'js/app.js'//单页面
    }
}

2.多页面

多页面写法，例：

const path = require('path')
module.exports = {
    //入口文件
    //入口文件相对路径（网络路径）
    entry: { //多页面
        //key:value  key是入口文件的名称，值是入口文件的路径
        app: './src/app.js',
        index: './src/index.js',

    },

    //出口文件
    //output:{path,filename}path是出口的磁盘路径，filename是出口目录中的文件名称
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: `js/app_[hash:6].js`也可以写上":"加数字，添加哈希值。
        filename: 'js/[name]_[hash:6].js' //多页面

    }
}

webpack --前端服务器–webpack-dev-server

http-server / server / webpack-dev-server 第三方服务包

需要自动刷新： 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