前端项目开发配置&webpack4试水

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

方法二

批量安装

1. 在package.json中写好需要的每个依赖
2. 执行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.总结

是有些坑的，不过必须踩踩坑才能印象深刻，继续加油咯