webpack —— 搭建一个webpack的学习环境

工欲善其事必先利其器，在我们开始学习webpack的时候，搭建一个运行环境是必须的，方便我们后期学习loader、plugins、babel-loader等一系列相关的模块。

后续发布关于webpack学习的文章，也都是基于这个模板来学习的。

目录结构

• 创建文件夹，新增src目录并创建index.js文件

  

  //index.js文件中
  console.log("Hello World!!!")
  
  
  //.npmrc文件中（npm默认的配置文件，也可以全局设置）
  registry = https://registry.npm.taobao.org/
  

• 初始化package.json文件

  npm init -y
  

安装依赖

注意：webpack4以后必需要安装webpack-cli才能运行打包，这些版本号推荐大家安装的。

npm install webpack@4.43.0 webpack-cli@3.3.12 -D

配置脚本命令

• 在package.json文件中，配置脚本启动命令

  {
      ...,
      "script":{
          "build":"webpack"
      }
      ...
  }
  

测试打包

• 运行npm run build命令，成功打包。

  

  

你可能有个疑惑，我们都没有配置webpack，为什么能打包？那是因为如果你对webpack不进行任何配置的时候，webpack会读取自己默认的配置。

• 默认配置相当于：

  const path = require ('path');
  module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
      path: path.resolve (__dirname, './dist'),
      filename: 'main.js',
    },
  };