对webpack构建工具都不是很了解,只知道它和vue一起使用,深层次的东西都不懂。
今天那我们就一起来学习一下。
webpack项目基本构建
1、创建一个项目:mkdir webpack-demo && cd webpack-demo
这步将会创建一个webpack-demo的空文件夹
2、本地安装:npm init -y ——这步将会生成webpack.json文件
接着安装webpack-cli :npm install webpack webpack-cli --save-dev ——这步将会生成:node_modules 模块文件夹
3、接着添加private属性,移除main入口,这样可以防止意外发布代码。
"private":true
4、使用webpack来管理脚本。
(1)创建一个bundle文件夹 。src 、dist
src(源代码):是用户书写和编辑的代码。 dist(分代码):分代码是代码书写后的最小化和优化后的输出目录,此目录最终将在浏览器中加载。
(2)安装library cnpm install --save lodash
安装一个要打包到正式环境的包,使用cnpm install --save
安装一个用户开发环境的安装包,使用cnpm install --save-dev
(3) 在src下新建index.js文件,并且引入 lodash import _ from "lodash"
5、输出
(1)执行npx webpack 会直接将index.js作为入口起点 ,同时输出:main.js。
index.html 中直接引入运行后生成的main.js文件。此时,在屏幕上将会有 hello webpack。运行成功。
(2)webpack能将模块语法进行转义,使用webpack.config.js来配置。新建webpack.config.js文件
在package.json script中添加——"build": "webpack"那么就可以使用npm来运行:cnpm run build
否则使用:npm webpack config --webpack.config.js
以上就是整个项目基本的构建过程。