【工具】---- webpack简析

1.什么是webpack一个现代JavaScript应用程序的静态模块打包器(modulebundler),它会分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。2.webpack的作用模块化,让我们可以把复杂的程序细化为小的文件;类似于TypeScript这种在JavaScrip...

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 -g2)查看版本号:  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 应该使用哪个模块,来作为构建其内部依赖图的开始。

1 module.exports = {2  entry: {3main: './path/to/my/entry/file.js'4  }5 };

2) output 出口

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

1 const path = require('path');2  3 module.exports = {4   output: {5  filename: 'bundle.js',6  path: '/home/proj/public/assets'7   }8 }

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

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

4)plugins 插件

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

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

 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入模块 2 const webpack = require('webpack'); // 用于访问内置插件 3  4 const config = { 5   module: { 6  rules: [ 7 { test: /\.txt$/, use: 'raw-loader' } 8  ] 9   },10   plugins: [11  new HtmlWebpackPlugin({template: './src/index.html'})12   ]13 };14 15 module.exports = config;

7.webpack-dev-server 热更新

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

1)安装: npm install webpack-dev-server@2 -S2)在package.json里面在scripts下添加start:"webpack-dev-server";3) 运行 npm run start4) 如果在4.0.1中安装失败 需要安装 npm install webpack-cli -D

8.webpack 跨域

 1 devServer:{ 2 proxy:{ 3  "/api":{ 4target:"https://mapi.eyee.com",  //目标服务器地址 5changeOrigin:true,  //是否修改来源, 为true时让目标服务器以为是webpack-dev-server发出的请求 6pathRewrite:{  // 将/api开头的请求地址, /api 改为 "" 7 "^/api":"" 8   } 9  }10   }11 }
源文地址:https://www.guoxiongfei.cn/cntech/18451.html
0