webpack使用入门（一）

前提：先安装好nodejs，并配置好环境变量。可以全局使用node npm 命令

1. 初始化项目

1. 新建一个目录，npm init -y初始化项目
2. 使用npm install -S -D webpack webpack-cli导入webpack依赖，注意S D 要大写，-S -D 是--save --dev 的简写。一般命令简写的话单个横杠加命令首字母大写，全写的话两个横杠加完整命令。但也不是绝对的，不过还是有很多符合这样的特点，也不仅是npm命令。

2. 创建目录结构

1. 完成步骤1，此时所建目录里面应该有node_modules文件夹以及package.json文件。

2. 新建目录dist 、 src。dist目录下面新建index.html ，src目录下新建index.js。

3. index.html写入以下内容：

4. index.js写入以下内容：

let h1=document.createElement('h1');
h1.innerHTML='hello webpack!'
document.body.appendChild(h1);

3. 使用webpack构建项目

1. 命令行方式：

   1. 输入命令：webpack ./src/index.js -o ./dist/bundle.js。
   2. 此时会在dist下面生成bundle.js文件，浏览器打开index.html，可以看到hello webpack。
   3. 命令说明：webpack 源文件 -o 编译后生成的目标文件。对于当前项目来说，源文件就是./src/index.js，目标文件就是./dist/bundle.js。源文件是你要编辑的文件，目标文件可以自定义路径及文件名，但是要保证在./dist/index.html能正确引用。

2. npm脚本方式启动：

   1. 在文件package.json里面的scripts属性下面新增启动命令build。内容如下：

      {
        "name": "webpack-demo",
        "version": "1.0.0",
        "description": "webpack demo",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
            //新增‘build’启动脚本，‘build’名字可以随便起，值是原本在命令行输入的内容。
            //--mode development 是启动模式，表明是开发模式。如果不写，会有一个警告
          "build":"webpack ./src/index.js -o ./dist/bundle.js --mode development"
        },
        "author": "kagari",
        "license": "ISC",
        "devDependencies": {
          "webpack": "^4.19.1",
          "webpack-cli": "^3.1.0"
        }
      }
      

   2. 命令行输入命令npm run build即可。效果跟第一种方式一样。

3. 配置文件方式启动：

   1. 在项目根目录下新建webpack.config.js文件，内容如下：

      const path = require('path');
      
      module.exports={
        entry:'./src/index.js',       //源文件
        output:{
          filename:'bundle.js',       //编译后的文件名
          path:path.resolve(__dirname,'dist'),    //编译后要存放的文件路径
        }
      }
      

   2. 命令行输入webpack --config webpack.config.js即可。

   3. 也可以将配置文件的启动方式也写入npm脚本，步骤跟方式2一样，自己试试吧！

4. 到此为止的目录结构如下：

webpack-demo: 
  dist: 
      bundle.js
      index.html
  node_mosules:
  src:
      index.js
  package.json
  webpack.config.js