1.npm初始化
新建项目目录,执行初始化npm初始化命令,生成package.json
npm init
初始化过程中会询问项目的基本信息,若想全部采用默认值,可以快速创建默认的package.json,命令为
npm init -y
留意package.json内的scripts
节点,这里可以声明项目脚本,用来方便我们管理和开发项目。
2.安装依赖
使用npm安装项目的必要依赖,大部分组件都是推荐使用局部安装(本地安装),能避免一些意料之外的错误
方法一
逐一安装
npm install xxx --save-dev
npm i xxx -D
命令解释:
- 1.第二句是第一句的简写,都是安装名为
xxx
的组件,组件可以在npmjs官网的search bar里查找,里面也会有每个组件的用法,注意一点,虽然大部分的组件都是一样的安装和引用规则,但是不排除某些组件有着个性的安装和引用方式,所以自己查询。 - 2.
--save-dev
等同于-D
,意思是将安装好的依赖写入package.json文件中的devDependencies
节点下,而使用-S
则写入dependencies
节点下,devDependencies
表示仅用于开发环境的依赖和发布环境需要的依赖,dependencies
表示同时用于开发环境和发布环境的依赖。 - 3.使用上述命令安装依赖会比较慢,因为依赖仓库在国外,想体验飞一样的安装速度可以使用国内的镜像,推荐淘宝镜像,使用方法是用
cnpm
代替npm
命令。 - 4.上述命令是局部安装依赖,全局安装的方式是添加
-g
参数,不推荐。
安装了依赖后,目录下会出现名为node_modules
的目录,如名所示,此目录下就存放着安装后依赖的具体文件。
下面列出一些常用的依赖(组件):
// webpack相关
webpack
webpack-cli
// 用于webpack的开发服务,能提供开发阶段的热更新
webpack-dev-server
webpack-dev-middleware
//node下的web应用程序开发框架,可以用来模拟后端接口
express
//webpack的loader和插件
file-loader
css-loader
exports-loader
style-loader
script-loader
url-loader
expose-loader
html-webpack-plugin
babel-loader
方法二
批量安装
- 在package.json中写好需要的每个依赖
- 执行
npm install
即可批量安装依赖。
3.配置webpack4
虽然在webpack4中已经不需要配置文件了,但大多数项目需要更细致的设置,所以我们可以在项目目录下新建webpack配置文件,建议建两个配置文件,一个作为开发环境用的配置文件,一个作为生产环境用的配置文件。
分开的配置方式搭配webpack插件DefinePlugin
可以轻松实现不改动代码而更换开发api接口url和线上api接口url。
配置文件的基础模版:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
详细而具体的配置可以参考webpack配置文档
到目前为止,一个前端项目的基本环境搭建好了,不过每次运行项目都要命令行执行webpack --config webpack.config.js
这么一长串的命令有点不简约,这时候就该脚本上场了,打开package.json,找到scripts
节点,添加如下的脚本
"scripts": {
"server": "node server.js",
"dev": "webpack-dev-server --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
命令解释:
- 1.
node server.js
是一个express
组件的基于node的服务器脚本,可以用来模拟简单的开发环境接口,具体express使用方法可以参考weback-using-webpack-dev-middleware - 2.上述脚本的使用方法:
npm run build
代替了webpack --config webpack.production.config.js
4.总结
是有些坑的,不过必须踩踩坑才能印象深刻,继续加油咯