从头学前端--es6（webpack）

安装webpack

webpack是一个前端打包工具

#要使用npm，必须先安装nodejs
//node安装完成后，打开终端，在全局安装webpack，方法如下：
npm install -g webpack
//等待安装完成......

创建配置项

使用webpack，必须设置好配置项

每个项目的依赖不一样，配置项也会不一样，所以配置项需要在项目的根目录配置:

1. 首先，在项目根目录 按 shift+右键 --> 在此处打开命令窗口
2. 然后输入：npm init
3. 然后连按7-8次回车，直到根目录出现 package.json 文件

配置package.json

配置package是使用webpack非常重要的一步

安装webpack依赖，在终端输入：npm install --save-dev webpack，等待成功。

使用webpack

使用webpack进行打包，为了可以一次打包多个文件，此时还需要配置一个文件webpack.config.js

在根目录新建一个webpack.config.js文件

//webpack.config.js
module.exports = {
  //__dirname是nodejs里的一个全局变量，它指向的是项目的根目录
  entry:__dirname + "/app/main.js", //入口文件路径，例如入口文件是：根目录下的app文件夹里的main.js
  output:{
    //设置出口文件（打包后的文件）位置
    path:__dirname+"/public/",
    //出口文件名
    filename:"index.js"
  }
}

webpack.config.js配置完成后，使用webpack打包，直接在cmd输入webpack回车即可。

输出的文件在根目录的public/index.js，然后引入index.js到你的html文件，开始疯狂输出把。

---

每次使用cmd，除了可以webpack回车打包以外，

还可以在package.json里的scripts下，添加一个属性start值为webpack

这样以后使用就可以在cmd里输入：npm start，跟前面输入webpack一样的效果

ps:start是一个关键字，如果需要自定义如：fy

那么使用的就不能npm fy，而是需要npm run fy

---