webpack的基本配置

这是一篇记录如何使用webpack管理项目的博客，笔者认为这里面的每一步都写的比较清楚，里面包含一些安装过程中可能会遇到的问题以及解决方法。可以供刚学习webpack的同学按照流程安装使用。(ps:文件夹名称手误输错，应该是webpack_study)

1. 项目文件夹建立并管理

• 建立一个项目webpack-study，在里面创建文件夹dist和src。src文件夹里存放源代码，dist文件夹里存放webpack打包后产生的文件。.在src文件夹里创建css文件夹，js文件夹，images文件夹，main.js文件，index.html文件。其中，main.js是项目入口文件
  
• 使用npm init -y 管理项目
  
  输入命令后会产生一个package.json文件

2. webpack安装

• 在我的本机里已经安装了webpack，但是在这里还需要使用npm install --save-dev webpack命令局部安装webpack。
  在安装成功后会产生一个node_modules文件夹和package-lock.json文件
  

3. 使用命令将文件夹打包

• 使用命令webpack ./src/main.js -o ./dist/bundle.js把mian.js文件打包
  
  在这里我们看到报错了，显示webpak没安装，然而我们已经安装了webpack。这是因为webpack4版本很多功能都已经放在webpackl-cli里面了，所以我们进行安装webpackl-cli

• 用命令npm install webpack-cli -g 进行全局安装
  
  用npm install webpack-cli -D进行项目本地安装
  

• 由于我们目前没有配置package.json里的文件
  所以我们目前需要使用命令webpack ./src/main.js -o ./dist/bundle.js --mode=development把main.js文件打包生成dist文件夹里的bundle.js

• 在main.js里面编辑console.log(‘ok’),并且在index.html里导入生成的bundle.js文件。
  
  然后在浏览器中打开index.html，并查看控制台里的输出表示webpack可以进行打包了
  

4. 安装自动打包工具

由于每次改动代码都要输入命令进行打包比较麻烦，所以我们需要安装 webpack-dev-server自动打包工具来达到自动更新的目的。

• 使用命令npm i webpack-dev-server -D进行安装

安装完成后我们要创建一个webpack.config.js配置文件

• 在webpack.config.js里配置相关信息
  当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建。

//由于webpack是基于node构建的，所以webpack配置文件中，任何合法的node代码都支持的
var path=require('path')
module.exports = {
    entry: path.join(__dirname, './src/main.js'), // 入口文件
    output: { // 指定输出选项
      path: path.join(__dirname, './dist'), // 输出路径
      filename: 'bundle.js' // 指定输出文件的名称
  }
}

• 在package.json文件里添加dev相关指令
  

"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
`--open`表示自动打开浏览器
`--port 1234`表示打开的端口号为1234
`--hot`表示启用浏览器热更新
` --contentBase src`表示指定根目录

• 使用npm run dev启动项目
  
  然后再来查看输出，发现报错为没有找到bundle.js文件
  
  由于我们配置过--contentBase src，所以我们就要在index.html里面修改script标签引入bundle.js的路径，直接改为根目录下访问。
  

5. 安装页面生成工具

除了第四步中修改script标签中引入bundle.js文件的方法外。还可以使用插件html-wepack-plugin，在内存中生成一样的html页面，并且自动把bundle.js注入到页面的最底部（在内存中的页面比在硬盘中的运行更快）。

• 使用npm i html-webpack-plugin -D命令安装
  
• 修改webpack.config.js配置文件

//由于webpack是基于node构建的，所以webpack配置文件中，任何合法的node代码都支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项 
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [ // 所有webpack  插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面的名称
    })
  ]
}

• 再次npm run dev并查看效
  
  我们可以看到控制台里ok输出成功，查看index.html的源码发现在底部注入了一个bundle.js文件
  到此，实现自动打包功能的webpack-dev-server插件安装成功，实现在内存中自动生成html页面并且把bundle。js文件注入的html-webpack-plugin插件安装成功。到此，wenpack的基本配置已经完成，但是此时还不能打包css样式的文件，因为webpack默认只能打包处理Js类型的文件，无法处理其他的非js文件如果要处理非js类型的文件，我们需要手动安装一些合适第三方loader加载器。