入门webpack-Demo1

1、安装node环境

检查是否安装成功

2、准备一个项目文件夹，进入其根目录

npm init初始化文件夹，产生一个package.json文件，如图

3、进入文件夹，安装webpack和webpack-cli

npm install webpack webpack-cli/ npm install webpack webpack-cli -d/npm install webpack webpack-cli -g
（-g是全局 -d是局部 ）
在package.json的依赖文件中出现webpack和webpack-cli

4、webpack必须的文件（入口文件，所处理后导出的文件，配置文件）

①entry部分（作为入口文件）

在项目文件下创建一个src文件夹，存放源代码（编译前）的文件
为了项目目录清晰，分为js部分和html部分
在js部分创建一个index.js，作为实际的编译入口文件

②output（作为导出文件）

在项目文件下创建一个dist文件夹，存放未来将要导出（编译后）的文件

③webpack.config.js

在项目根目录下创建一个名为webpack.config.js的文件，专门配置webpack
建好后项目结构如图：

5、进入webpack.config.js，指定最基本的配置（入口、出口、编译模式）

webpack.config.js文件

const path = require('path')   //path为node中的文件路径模块，要用其中的方法来配置出口的文件路径
module.exports={
    mode:'production', //选定模式（开发模式）
    entry:'./src/js/index.js',  //选定入口文件
    output:{    //配置出口路径及文件名
        path:path.resolve(__dirname,'dist'),  //__dirname为项目磁盘目录，将出口文件存放到项目文件的dist文件夹下
        filename:'index-dist.js' //可重命名导出后的文件名字
    }
}

6、运行webpack

进入项目根目录，运行node_modules/.bin/webpack
(实际上是去项目内的node_modules的文件目录下找到指定文件来运行)

发现在指定的dist目录下出现了index-dist.js

即编译成功

7、简化编译代码

通过node_modules/.bin/webpack来运行太过繁琐
可以在package.json中的scripts中配置命令及对应的响应
比如，将node_modules/.bin/webpack这个响应放到dev命令下
dev:"node_modules/.bin/webpack"
如图所示：

现在运行npm run dev即可执行node_modules/.bin/webpack