1-1 webapack4配置-webpack介绍及打包基本步骤实例

1.什么是webpack？
webpack是一个javascript应用程序的静态模块打包器。
2.webpack有什么作用？
webpack会将项目的资源文件当成一个一个的模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别出来，最后将应用程序需要的每个模块打包成一个或者多个bundle。
3.打包的实例：
1）安装node
链接: https://nodejs.org/zh-cn/
2）在桌面新建一个项目webpackdemo
3）打开sublime，打开这个项目
4）创建package.json文件（步骤：首先打开终端，进入到项目所在的文件夹路径里，进入项目，输入npm init,然后根据提示一步步进行选择）如下图所示：
在这里插入图片描述输入npm init
这样项目下就会出现一个package.json文件，文件里的内容为：

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "\"webpack4\"",
  "main": "webpack.config.js",
  "dependencies": {
    "webpack-cli": "^3.3.11",
    "webpack": "^4.43.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "\"xutian\"",
  "license": "ISC"
}

5）安装webpack
可以使用本地安装，也可以使用全局安装，但是建议使用本地安装，因为不同的项目可能会用到不同版本的webpack，使用全局安装的话会造成一些麻烦）
本地安装：在终端输入npm install webpack webpack-cli --save-dev
全局安装：在终端输入npm install -global webpack webpack-cli
6)打包：在项目中创建一个src文件夹，在src文件夹下创建一个index.js文件，在package.json文件里的“scripts”:{}里写"dev": "webpack --mode development", "build":"webpack --mode production"完整代码如下：

{
 "name": "webpackdemo",
 "version": "1.0.0",
 "description": "\"webpack4\"",
 "main": "index.js",
 "scripts": {
   "dev": "webpack --mode development",
   "build":"webpack --mode production"
 },
 "author": "\"xutian\"",
 "license": "ISC",
 "devDependencies": {
   "webpack": "^4.43.0",
   "webpack-cli": "^3.3.11"
 }
}

在终端写命令：
npm run dev(开发阶段)
npm run build(生产阶段)
运行完这个命令以后，项目中就会生成一个dist文件夹，里面有main.js文件。
注：开发阶段还是生产阶段看你自己的需要来决定。

1-1 webapack4配置-webpack介绍及打包基本步骤实例

猜你喜欢