git 创建webpack项目_建立项目的webpack简单配置

实战项目中的 Webpack 配置：

说明：以下命令通过 Git Bash 执行

1.建立webpack-demo文件夹及npm初始化

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project

$ mkdir webpack-demo

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project

$ cd webpack-demo/

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo

$ npm init

然后一路回撤，npm初始化成功，建立package.json，用于存放npm的相关信息(主要是安装模块信息)

2.安装 Webpack

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo

$ npm install webpack --save-dev

3.建立项目所需文件夹

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo

$ mkdir src

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo

$ mkdir dist

然后Sublime打开"webpack-demo"，并新建 index.html, 引入一会打包后的 bundle.js 文件。

src下新建script和style文件夹，如下图所示：

4.配置 webpack.config.js

官方文档地址：https://webpack.js.org/configuration/

根目录下新建 webpack.config.js文件，配置内容如下：

const path = require('path');

module.exports = {

entry: './src/script/main.js', // 入口文件的配置项

output:{ // 出口文件的配置项

path: path.resolve(__dirname, 'dist/js'), // 打包的路径文职

filename: 'bundle.js' // 打包的文件名称

}

};

新建入口文件 main.js 及代码如下：

function helloWorld() {

}

Git Bash 运行以下命令

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo

$ webpack

打包成功以后，在 dist下会多一个js文件夹，里边是打包后文件bundle.js.

最简单的 Webpack 打包配置完成。