建立项目的webpack简单配置

实战项目中的 Webpack 配置：

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

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

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project $ mkdir webpack-demoAdministrator@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 srcAdministrator@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 打包配置完成。

总结

以上是生活随笔为你收集整理的建立项目的webpack简单配置的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。