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文件中编写的代码,打包成功!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。