webpack基本配置

webpack配置中

在进行配置之前，必须先要安装node环境：

进入nodeJS官网（nodejs.cn），下载稳定版本的node安装文件（node-xxxx.msi），一直下一步就可以。

node安装完成以后，就开始安装webpack：

分为两步；

一是全局安装：在项目所在的盘符下全局安装webpack，例如：F盘。命令行输入：

npm install webpack -g

出现这些时安装成功：

二是webpack依赖项：

在安装依赖项之前，需要在项目里安装一个配置项；进入我们的项目，

打开命令提示符；win+R输入cmd或者在文件夹目录地址栏选择路径直接输入cmd进入

如：

命令行输入：

npm init

完成配置项的安装，如果不是上线项目，一直回车就OK了，不用其他配置；

这时表示配置项 已经完成。

在项目的根目录下出现package.json文件；（原始的配置文件）

{  "name": "demo1",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",}

接下来就要创建webpack依赖项了

npm install --save-dev webpack

安装webpack依赖项

此时表示webpack已经完成，此时package.json中会出现一个新的字段

接下来在项目目录下新建文件（夹）app和public，在public里有一个index.html文件，app里有一个main.js和work.js，main.js作为一个入口文件使用，work.js里写代码

在main.js里引入work.js

require('./work.js');

在index.html里引入main.js文件

<script src="./webpack.js/"></script>

接下来就要使用webpack来进行打包文件了，进入项目根目录，命令行输入

webpack app/main.js public/webpack.js

这时会在public文件夹下生成一个webpack.js文件

在项目目录下创建webpack.config.js文件（必须全局安装webpack才能使用）

module.exports = {   //入口文件位置    entry:__dirname+'/app/main.js',        //__dirname是nodeJS里的一个全局变量，指向当前项目的根目录  //出口文件位置    output:{        //打包后文件的位置        path:__dirname+'/public',        //打包后文件名        filename:'webpack.js'    }}    

完成以上配置以后，在命令行直接输入 webpack 运行结果与运行命令 webpack app/main.js public/webpack.js 一致

配置package.json运行

{  "name": "demo1",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "dev": "webpack",    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^2.4.1"  }}

完成以后命令行输入

npm run dev

直接运行打包文件。

基本的配置就到这里吧