webpack: webpack命令的使用

最新推荐文章于 2022-05-29 20:39:30 发布

星辰大海_enoch

最新推荐文章于 2022-05-29 20:39:30 发布

阅读量407

点赞数

本文链接：https://blog.csdn.net/u012872771/article/details/103666599

版权

webpack优点:
任意模块化的语法都支持
异步加载

1. 看官网文档 :

https:// webpack.js.org/

2. 安装环境 node

3. 生成一个项目说明书

npm init

        $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack命令使用3) webpack3            // 项目名称
version: (1.0.0)                                     // 版本
description: 练习webpack                             // 描述
entry point: (index.js)                              // 入口文件
test command:                                        // 测试命令(忽略)
git repository:                                      // git仓库地址
keywords: 关键字,webpack练习                         // 关键字
author: fanghuayong                                  // 作者
license: (ISC) MIT                                   // 证书类型
About to write to F:\作业\进阶班\前端工程化\webpack\webpack命令使用3\package.json:

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "练习webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "关键字",
    "webpack练习"
  ],
  "author": "fanghuayong",
  "license": "MIT"
}


Is this OK? (yes) yes

填完之后会在该文件夹下生成一个package.json文件

4. 下载webpack

npm install webpack --save-dev

--save-dev: 告诉项目说明书在开发的时候使用webpack

开发使用: 开发的时候才使用，运行的时候不需要使用，比如bebal的es6转es5

运行使用: 运行的使用使用，比如jquery

安装好了以后package.json多了一个devDependencies属性，里面包含包名字和版本号。

同时在该文件夹中多了一个文件夹node_modules，下载下来的webpack和依赖包都在这里

5. 淘宝镜像 https://npm.taobao.org/

有时候国外的npm服务器很慢，在这里可以选择先安装淘宝镜像cnpm,在从cnpm上下载

        $ npm install -g cnpm --registry=https://registry.npm.taobao.org

6. 下载jQuery

运行的使用要使用jQuery，保存一下

        $ cnpm install jquery --save

7. 下载webpack-cli

这是一个命令行工具，可以更好的使用webpack

        $ cnpm install webpack-cli --save-dev

8. 运行webpack

下载后的包一般都在该文件夹的.bin/目录下

        $ ./node_modules/.bin/webpack

Insufficient number of arguments or no entry found.        // 参数数量不足或没有找到条目。
Alternatively, run 'webpack(-cli) --help' for usage info.  // 或者，运行‘webpack(-cli)-帮助’获取使用信息。 

Hash: 445e81801ea1d980db96
Version: webpack 4.39.1
Time: 59ms
Built at: 2019-08-09 9:41:56 AM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: Mode | webpack

// 警告在配置‘模式’选项尚未设置，WebPack将回落到“生产”的这个值。将“模式”选项设置为“开发”或“生产”，以启用每个环境的默认值。
// 您还可以将其设置为“无”以禁用任何默认行为。了解更多信息：https://webpack.js.org/configuration/mode/ 

ERROR in Entry module not found: Error: Can't resolve './src' in 'F:\作业\进阶班\前端工程化\webpack\webpack命令使用3'

报了一些错误信息，这是因为它没有在src目录下找到入口文件。在这里我们给它创建一个src目录并在该目录下创建index.js文件。

再次运行。

在次运行之后自动生成了一个dist文件夹及该文件夹下的main.js文件，这个文件是一个入口文件index.js打包过后的文件。

9. 使用npm run

在package.json文件下修改scripts属性中的项，它可以自动在.bin/目录下找相应的包

10. 开发模式和生产模式

黄色警告一直在提示没有开发模式和生产模式。我们在package.json文件的scripts属性中添加相应的两个项。使用-- -- mode 传参

然后切到开发模式，main.js文件中的代码会展开；生产模式下会压缩。

        npm run dev

或(写法不同)

        ./node_modules/.bin/webpack -- --mode development

11. 增加模块和打包

在src下新增一个nav.js的文件，并暴露到index.js的文件中，保存打包后，在dist文件夹的main.js中也会改变。

在nav.js文件中改变了数据后，每次都需要重新打包，所有我们可以package.json文件中的prod后面加个监听参数。

"prod": "npm run webpack -- --mode production --watch"

在执行一次npm run prod，这样就有改动就立即打包。

12. tree shaking

import 会引入死代码但是webpack可以删除

不打包没有引入执行的代码，解决

13. main.js结构

用函数当做作用域

        (function(){modules})
({
    "src/color.js": function(){},
    "src/index.js": function(){},
    "src/nav.js": function(){},
})

其他: 模块使用

        // 模块一: 
export default "nav"
import nav from './导入导出.js'
// 暴露多个
const top = "top";
const botton = 'botton'
export {top, bottom}
import {top, botton} from './导入导出.js'

// 模块二:
function add(){

}
module.exports = add;
var add = require('./导入导出.js')

// 注意 导入的时候尽量只使用一种导入方式
// import 会引入死代码 但是webpack可以删除