【工具】---- webpack简析

1. 什么是webpack

　　一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

2. webpack的作用

• 模块化，让我们可以把复杂的程序细化为小的文件；
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言，使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器。

3. webpack的工作方式

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

4. webpack与gulp、grunt的区别

　　webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

5. webpack的基本使用

1）全局安装: npm install webpack -g

2）查看版本号:  webpack -v

3）初始化: npm init  //生成package.json文件

4）局部安装: npm install webpack --save-dev

5）建立并配置webpack.config.js文件

6）打包[仅适用于4.0以下版本]: webpack  //生成dist文件夹

// 注意:webpack4.0以上版本坑比较多，新手建议安装4.0以下版本。

　  01、卸载默认： npm uninstall webpack
    02、全局安装： npm install webpack@3.5.3 -g
    03、局部安装： npm install webpack@3.5.3 --save-dev

 6. webpack配置属性

1）entry 入口

　 可以通过在 webpack.config.js中配置 entry 属性，来指定一个入口起点（或多个），默认值为 ./src。其指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

module.exports = {
    entry: {
        main: './path/to/my/entry/file.js'
    }
};

 2) output 出口

      告诉 webpack 在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。

const path = require('path');
 
module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
}

3）loader 加载器

  让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader可以将所有类型的文件转换为 webpack能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

安装jsloader：cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react 

安装cssloader：cnpm install --save-dev style-loader css-loader sass-loader node-sass

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },  // test:用于标识应该被对应的loader进行转换的某个或某些文件
      { test: /\.ts$/, use: 'ts-loader' }   //use: 表示进行转换时，应该使用哪个 loader
    ]
  }
};

4) plugins 插件

  插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。想要使用一个插件，你只需要 require()它，然后把它添加到 plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多使用同一个插件，这时需要通过使用new操作符来创建它的一个实例。

安装插件: npm install html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入模块
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

7. webpack-dev-server 热更新

   热更新功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

1）安装： npm install webpack-dev-server@2 -S

2）在package.json里面在scripts下添加start:"webpack-dev-server";

3) 运行 npm run start

4) 如果在4.0.1中安装失败 需要安装 npm install webpack-cli -D

8. webpack 跨域

devServer:{
      proxy:{
          "/api":{
              target:"https://mapi.eyee.com",  //目标服务器地址
              changeOrigin:true,  //是否修改来源, 为true时让目标服务器以为是webpack-dev-server发出的请求
              pathRewrite:{  // 将/api开头的请求地址, /api 改为 ""
                  "^/api":""
              }
          }
     }
}