webpack 入门笔记

Windows下建项目文件夹（首先得在电脑上安装node  这个自己搞吧 是为了方便用npm下载依赖包 ，全局安装webpack

npm install -g webpack

）

1、创建项目文件  终端输入mkdir inner  或者你自己直接新建文件夹也可以

2、进入新建的文件夹环境下cd./inner

3、在你的项目里安装webpack    终端输入   npm i --save--dev webpack  这个时候你会发现inner文件夹下有了一个文件叫做node_modules，那就说明你在当前环境下安装webpack成功了 可以webpack -v查看下版本 哈哈哈

4、在文件夹inner中创建一个package.json文件,这是一个标准的npm说明文件，包括依赖模块自定义脚本任务等等。在终端中使用npm init命令也可以自动创建初这个package.json文件（内容如下）

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

5、回到文件夹inner中，在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件

:

6、在inner文件夹下见一个webpack.config.js文件 ，文件内容如下

const path=require('path');
//单入口配置
module.exports={
    entry: './app/main.js',
    output:{
        path:path.join(__dirname,'public'),//目标文件 __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 public是出口文件所在的父目录
        filename:'index.js'//目标出口文件名称和index。html文件中引入的js文件名称一致
    },
    mode:'production'
}
//多入口配置
// module.exports={
//     entry: {
//         index2:'app.js',
//         admin:'admin.js'
//     },
//     output:{
//         path:__dirname+'/public',//目标文件 __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 public是出口文件所在的父目录
//         filename:'[name].js'//通过占位符确保文件名唯一
//     },
//     mode:'production'
// }

7、然后再终端运行 node_modules\.bin\webpack

就会发现在你指定的文件夹里自动生成了出口js文件，那是已经打包好了的

8、然后再浏览器直接打开你的index.html文件就可以了 看到了界面了，

但是你每次修改东西 都要重新打包一次再生效 是不是很烦

所以就要监视它的一举一动哦

在终端输入

webpack --progress --colors --watch

然后就不用再打包了 ，直接修改代码 然后刷新页面就可以了