当前位置：Gxlcms > JavaScript > 从dev到prd使用详解

从dev到prd使用详解

时间：2021-07-01 10:21:17 帮助过：27人阅读

这次给大家带来从dev到prd使用详解，从dev到prd使用的注意事项有哪些，下面就是实战案例，一起来看一下。

本文用于学习新特性和总结开发必用plugin & loader，从dev到prd，走你~

Big changes

Environment

Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.

Usage

You have to choose (mode or --mode) between two modes now: production or development

本次新版本中引入了 mode 配置项，开发者可在 none，development（开发 ） 以及 production（产品）三种模式间选择。该配置项缺省情况下默认使用 production 模式。

  1. development 模式给你极致的开发体验，包含浏览器调试相关工具，极快的增量编译，丰富全面的报错信息...

  2. production 模式则包含大量发版优化，代码压缩，丝般润滑的运行时优化，开发相关代码的排除，易用，etc.

  3. none 不使用预设，等于老版本中全部自己配置的原始状态。

eg:

  1. webpack --mode development

Usage

  1. Some Plugin options are now validated

  2. CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI

  3. The ProgressPlugin (--progress) now displays plugin names

  4. At least for plugins migrated to the new plugin system

新版中将 webpack 命令行工具拆分到单独的仓库中，所以需要额外安装 webpack-cli。

  1. npm init -y //初始化项目
  2. npm install webpack webpack-cli -D //安装webpack webpack-cli 依赖
  3. npx webpack --mode development // npx可以直接运行node_modules/.bin目录下面的命令

或者通过配置package.json的script build

  1. "scripts": {
  2.  "build": "webpack --mode development",
  3. },

加载loader方法总结

use

  1. module: {
  2.  rules:[
  3.   { 
  4.    test: /\.css$/,
  5.    use: ['style-loader','css-loader']
  6.   }
  7.  ]
  8. }

css-loader用来解析处理CSS文件中的url路径,要把CSS文件变成一个模块

多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换

此插件先用css-loader处理一下css文件，再用style-loader把CSS文件变成style标签插入head中

loader

  1. module: {
  2.  rules:[
  3.   {
  4.    test: /\.css$/,
  5.    loader: ["style-loader", "css-loader"]
  6.   },
  7.  ]
  8. }

use+loader

  1. module: {
  2.  rules:[
  3.   {
  4.    test: /\.css$/,
  5.    use:[
  6.     { loader:"style-loader"},
  7.     { 
  8.      loader: 'css-loader',
  9.      options: {sourceMap: true}
  10.     }
  11.    ]
  12.   }
  13.  ]
  14. }

这三种loader的写法，最后打包的结果相同

loader中的options配置项可以用"?"跟在加载器后面

eg:

  1. { 
  2.  test: /\.jpeg$/, 
  3.  use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/', 
  4. }

为以下配置的简写

  1. { 
  2.  test: /\.jpeg$/, 
  3.  use: {
  4.   loader:'url-loader',
  5.   options:{
  6.    limit:1024,
  7.    name:[path][name].[ext],
  8.    outputPath:img/
  9.    publicPath:output/'
  10.   }
  11.  }
  12. }

开发必备的loader&plugins

  1. css-loader

  2. babel-loader

讲ES6代码转换为ES5

  1. {
  2.  test: /\.js/,
  3.  use: {
  4.   loader: 'babel-loader',
  5.   query: {
  6.    presets: ["env", "stage-0", "react"]
  7.   }
  8.  }
  9. },

babel-loader的预设可以添加在query中，也可以在项目根目录添加 .babelrc 文件

  1. .babelrc
  2. {
  3.  "presets": [
  4.   "env",
  5.   "stage-0",
  6.   "react"
  7.  ]
  8. }

html-webpack-plugin

插件的基本作用就是生成html文件。原理很简单：

将 webpack中entry配置的相关入口thunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. new HtmlWebpackPlugin({
  3.  template: './src/index.html',//指定产的HTML模板
  4.  filename: `index.html`,//产出的HTML文件名
  5.  title: 'index',
  6.  hash: true,// 会在引入的js里加入查询字符串避免缓存,
  7.  minify: {
  8.   removeAttributeQuotes: true
  9.  }
  10. }),

可以用 cnpm search html-webpack-plugin 查找想用loader的用法

less-loader sass-loader

优化向prd进发

提取公共的css代码

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

  1. npm i extract-text-webpack-plugin@next -D
  1. const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
  2. let cssExtract = new ExtractTextWebpackPlugin({
  3.  filename: 'css/css.css',
  4.  allChunks: true
  5. });
  1. module:{
  2.  rules:[
  3.   {
  4.    test: /\.css$/,//转换文件的匹配正则
  5.    loader: cssExtract.extract({
  6.     use: ["css-loader?minimize"]
  7.    })
  8.   },
  9.  ]
  10. }
  11. plugins:[
  12.  ...... ,
  13.  + cssExtract
  14. ]

尽量减少文件解析,用resolve配置文件解析路径,include

  1. rules: {
  2.  test: /\.js$/,
  3.  loader:'babel-loader',
  4.  include: path.resolve(dirname, 'src'),//只转换或者编译src 目录 下的文件
  5.  exclude: /node_modules/ //不要解析node_modules
  6. }

resolve.mainFields

  1. WebpackTest
  2. |
  3. |
  4. | - src
  5. | | - index.js
  6. |
  7. | - lib
  8. | | - fetch
  9. |  |
  10. |  browser.js
  11. |  node.js
  12. |  package.json
  13. |
  14. | - webpack.config.js

当从 npm 包中导入模块时（例如，引入lib下的库），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同。

package.json

lib文件夹下的package.json中配置相对应模块的key

  1. {
  2.  "name": "fetch",
  3.  "version": "1.0.0",
  4.  "description": "",
  5.  "node": "./node.js",
  6.  "browser": "./browser.js",
  7.  "scripts": {
  8.  "test": "echo \"Error: no test specified\" && exit 1"
  9.  },
  10.  "keywords": [],
  11.  "author": "",
  12.  "license": "ISC"
  13. }

webpack.config.js

在resolve解析对象中，加入lib的路径

  1. resolve: {
  2.  extensions: ['.js', '.json'],
  3.  mainFields: ['main', 'browser', 'node'],
  4.  modules: [path.resolve('node_modules'), path.resolve('lib')]
  5. }

index.js

这样在index.js中引用第三方库时，会去查找modules下的路径中是否配置了所需的文件，知道在package.json中找到mainFields中的key对应文件，停止。

  1. let fetch = require('fetch');
  2. console.log(fetch);

打包后 console.log出的对象

如果交换mainFields中的key顺序

  1. mainFields: ['main', 'node','browser']

打包后 console.log出的对象，因为找到了key=node对应的文件就停止了查找

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

新建webpack.react.config.js

  1. const path = require('path');
  2. const webpack = require('webpack')
  3. module.exports = {
  4.  entry: {
  5.   react: ['react', 'react-dom']
  6.  },
  7.  output: {
  8.   path: path.join(dirname, 'dist'),//
输出动态连接库的文件名称 filename: '[name]_dll.js', library: '_dll_[name]'//全局变量的名字，其它会从此变量上获取到里面的模块 }, // manifest 表示一个描述文件 plugins: [ new webpack.DllPlugin({ name: '_dll_[name]', path: path.join(dirname, 'dist', 'manifest.json')//最后打包出来的文件目录和名字 }) ] }

在entry入口写入要打包成dll的文件,这里把体积较大的react和react-dom打包

output中的关键是library的全局变量名，下文详细说明dll&manifest工作原理

打包dll文件

  1. webpack --config webpack.react.config.js --mode development

打包出来的manifest.json节选

打包出来的react_dll.js节选

可见manifest.json中的 name值就是

  1. output：{
  2.   library:_dll_react
  3. }

manifest.json就是借书证，_dll_react就像图书馆书籍的条形码，为我们最终找到filename为react_dll.js的参考书

使用“参考书”

在webpack.config.js中加入“借书证”

  1. new webpack.DllReferencePlugin({
  2.   manifest: path.join(dirname, 'dist', 'manifest.json')
  3. })

再运行

  1. webpack --mode development

打包速度显著变快

打包后的main.js中，react,react-dom.js也打包进来了，成功~

  1. import React from 'react';\n//import ReactDOM from 'react-dom';
  2.  (function(module, exports, webpack_require) {
  3. "use strict";
  4. eval("\n\n//import name from './base';\n//import React from 'react';\n//import ReactDOM from 'react-dom';\n//import ajax from 'ajax';\n//let result = ajax('/ajax');\n\n//ReactDOM.render(<h1>{result}</h1>, document.getElementById('root'));\n// fetch fetch.js fetch.json fetch文件夹\n//let fetch = require('fetch');\n//console.log(fetch);\n//let get = require('../dist/bundle.js');\n//get.getName();\nconsole.log('hello');\n\nvar name = 'zfpx';\nconsole.log(name);\nif (true) {\n  var s = 'ssssssssssssssssssssssss';\n  console.log(s);\n  console.log(s);\n  console.log(s);\n  console.log(s);\n}\n\n//# sourceURL=webpack:///./src/index.js?");
  5. /***/ })
  6. /******/ });

未完待续

  1. webpack.ProvidePlugin

  2. 拷贝静态资源

  3. 压缩css（npm i -D purifycss-webpack purify-css）

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

webpack中dev-server使用步骤详解

Angular2中如何使用Dom

以上就是从dev到prd使用详解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！