摘要：基础配置安装配置这里默认已经安装了环境检查是否安装命令创建项目文件夹例如创建如下文件夹创建配置项或者此时生成文件全局安装和在项目文件夹中安装和安装结束后在编辑器中打开项目打开文件，出现和的版本号，即表示安装成功配置
Webpack 基础配置01 安装配置
这里默认已经安装了node环境
检查node是否安装命令 node -v
创建项目文件夹
例如创建如下文件夹 webpack-demo
创建配置项
npm init
或者
npm init --y
此时生成package.json文件
全局安装webpack和webpack-cli
npm install webpack webpack-cli -g
在项目文件夹中安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
安装结束后在编辑器中打开项目
打开pakage.json文件，出现webpack和webpack-cli的版本号，即表示安装成功
配置生产和开发模式
pakage.json中"scripts"参数表示自定义命令，这里我们可以添加如下代码:
"dev": "webpack --mode development", "build": "webpack --mode production"
创建入口文件
./src/script/main.js
在项目路径下创建webpack配置文件，默认不需要配置，这里我们可以自定配置选项
entry表示入口文件的地址；output表示输出信息，其中，path为输出文件的目录地址，如果没有则自动生成（**必须要绝对路径**），filename表示生成的文件名
项目文件夹下创建一个dist文件夹，存放打包后的js文件
运行：
npm run dev 表示开发模式
打包完成，此时在./dist/js/下生成了一个bundle.js文件
npm run build 表示生产模式，此时的main.js 被压缩
创建index.html 引入打包好的bundle.js文件
在浏览器中打开index.html文件，打开控制台:
正确无误输出了我们在入口js文件中编写的代码，打包成功！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102048.html
摘要：多入口多出口初始化项目，搭建基础目录配置配置文件引入中的模块，可配置多个入口文件解决行命令的目录和不在同一个目录时造成的容错率问题，用绝对路径同样有效对应你入口文件的，也就是属性名配置以开发模式运行打包成功打包后查看输出文件，会发现 webpack4 多入口多出口 初始化webpack项目，搭建基础目录showImg(https://segmentfault.com/img/bVbo...
摘要：配置文件中设置引入文件之前讲过在引用文件的时候可以引入和，诸如这样现在提供一种更常用和更便捷的方法。同样先在项目文件夹下安装和模块配置文件如下选项用来处理对应的模块用正则匹配所有的文件使用模块这样就已经可以正常打包文件了。 配置文件中设置引入css文件 之前讲过在引用css文件的时候可以引入style-loader和css=loader，诸如这样： require(style-load...
摘要：基础配置打包多个文件继续基础配置的内容，在目录下再新建一个文件在文件中引用开发模式进行打包同样在中引入打包后的文件打开控制台，正确输出如下引用文件在路径下新建一个目录，其下创建一个文件，内容如下在中引入文件默认情况是不支持文件的，因此需要安 Webpack 基础配置02 打包多个js文件 继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js...
阅读 1377·2021-09-24 10:26
阅读 1689·2019-08-30 14:14
阅读 2098·2019-08-29 16:54
阅读 362·2019-08-29 14:09
阅读 1467·2019-08-29 12:55
阅读 922·2019-08-28 18:13
阅读 1572·2019-08-26 13:39
阅读 2559·2019-08-26 11:43
