第一步：

1、新建一个文件夹，

2、点击进入该文件夹，

3、点击搜索输入 cmd +回车（Enter）打开命令提示符

4、进入到当前文件夹的 CMD 指令

第二步：

1、输入 npm init -y 初始化 npm

2、文件夹会出现 `packge.json` 的文件夹

3、接着安装 `webpack-cli`（此工具用于在命令行中运行 webpack）：

npm install webpack webpack-cli --save-dev

4、安装完成后文件夹会有 node_modules 和 package-lock.json

第三步：

1、将文件夹导入编程工具

2、在myWebpack2下新建一个index.html 、webpack.config.js 以及一个app目录，并在app目录下新建 index.js 文件

3、在webpack.config.js 下输入

const path = require('path');//导入node内置path模块module.exports = {mode:"development",    //设置模式  开发者模式entry: './src/index.js',  //入口文件路径output: {filename: 'main.js',  //main 这里可以自己取名字path: path.resolve(__dirname, 'dist'),//__dirname  项目路径  //path 出口路径//更新一次代码 自动清理文件clean:true},//需要自己添加模块配置module:{        rules:[],}
};

4、在 index.js 下输入

import _ from 'lodash';function component() {const element = document.createElement('div');// lodash（目前通过一个 script 引入）对于执行这一行是必需的// lodash 在当前 script 中使用 import 引入element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element;}document.body.appendChild(component());

5、在 index.html 下输入

6、在 package.json 下加入

"build": "webpack"

第四步：

1、要在 `index.js` 中打包 `lodash` 依赖，我们需要在本地安装 library：

npm install --save lodash

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 `npm install --save`。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 `npm install --save-dev`。

2、执行 `npx webpack`，会将我们的脚本 `src/index.js` 作为入口起点，也会生成 `dist/main.js` 作为输出。Node 8.2/npm 5.2.0 以上版本提供的 `npx` 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 `./node_modules/.bin/webpack`）：

npx webpack

3、运行 index.html 成功

webpack 打包（初学打包运行）相关推荐

th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能
配置打包的入口与出口 const path = require('path') // 导入 node.js 中专门操作路径的模块 module.exports = { entry: path.join ...
Webpack安装及打包js、css文件示例
什么是Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.Webpack 可以将多种静态资源 js.css ...
webpack代理配置打包后接口404_webpack 从零开始
什么是webpack? webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖 ...
webpack配置排除打包
目标1:webpack配置排除打包-打包瘦身通过配置vue-cli把一些平常不需要用的包排除在打包文件之外. 例如:让 webpack 不打包 vue xlsx 和 element 使用方式先找到 ...
一篇弄懂webpack静态资源打包器
认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 环境 1)node环境 2)vs code编辑器规约 ...
vue项目打包步骤及运行打包项目
** 1.项目打包 ** 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 解决: 修改 1.查看pack ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
webpack 原理图_webpack打包原理
展开全部将根据文件间32313133353236313431303231363533e78988e69d8331333433643638的依赖关系对其进行静态分析,然后将这些模块按指定规则生成静态资 ...
python 打包exe_将python文件打包exe独立运行程序方法详解
首先需要安装pyinstaller库. pip install pyinstaller exe程序打包步骤 cmd 进入要编译的python文件所在的文件夹, 然后 pyinstaller -F he ...

webpack 打包（初学打包运行）

第一步：

1、新建一个文件夹，

2、点击进入该文件夹，

3、点击搜索输入 cmd +回车（Enter）打开命令提示符

4、进入到当前文件夹的 CMD 指令

第二步：

1、输入 npm init -y 初始化 npm

2、文件夹会出现 `packge.json` 的文件夹

3、接着安装 `webpack-cli`（此工具用于在命令行中运行 webpack）：

4、安装完成后文件夹会有 node_modules 和 package-lock.json

第三步：

1、将文件夹导入编程工具

2、在myWebpack2下新建一个index.html 、webpack.config.js 以及一个app目录，并在app目录下新建 index.js 文件

3、在webpack.config.js 下输入

4、在 index.js 下输入

5、在 index.html 下输入

6、在 package.json 下加入

第四步：

1、要在 `index.js` 中打包 `lodash` 依赖，我们需要在本地安装 library：

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 `npm install --save`。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 `npm install --save-dev`。

3、运行 index.html 成功

webpack 打包（初学打包运行）相关推荐

最新文章

热门文章

webpack 打包（初学打包运行）

第一步：

1、 新建一个文件夹，

2、 点击进入该文件夹，

3、 点击搜索 输入 cmd +回车（Enter）打开命令提示符

4、进入到 当前文件夹的 CMD 指令

第二步：

1、输入 npm init -y 初始化 npm

2、文件夹会出现 packge.json 的文件夹

3、 接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

4、 安装完成后 文件夹会有 node_modules 和 package-lock.json

第三步：

1、将文件夹导入编程工具

2、在myWebpack2下新建一个index.html 、webpack.config.js 以及一个app目录 ，并在app目录下 新建 index.js 文件

3、在webpack.config.js 下输入

4、在 index.js 下输入

5、在 index.html 下输入

6、在 package.json 下 加入

第四步：

1、 要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev。

2、执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

3、运行 index.html 成功

webpack 打包（初学打包运行）相关推荐

最新文章

热门文章

1、新建一个文件夹，

2、点击进入该文件夹，

3、点击搜索输入 cmd +回车（Enter）打开命令提示符

4、进入到当前文件夹的 CMD 指令

2、文件夹会出现 `packge.json` 的文件夹

3、接着安装 `webpack-cli`（此工具用于在命令行中运行 webpack）：

4、安装完成后文件夹会有 node_modules 和 package-lock.json

2、在myWebpack2下新建一个index.html 、webpack.config.js 以及一个app目录，并在app目录下新建 index.js 文件

6、在 package.json 下加入

1、要在 `index.js` 中打包 `lodash` 依赖，我们需要在本地安装 library：

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 `npm install --save`。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 `npm install --save-dev`。