webpack每日进阶--webpack入门

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/webofrxy/article/details/80602869

webpack配置文件结构

webpack的配置包括以下几个部分：
入口：entry
出口：output
模式： mode
模块： module
插件：plugin

目录结构

|-- src
    |--file.js
|-- node_module
|-- webpack.config.js
|-- package.json

学习步骤

1. 按照上面的目录搭建项目
2. 安装好webpack
3. npm install 下载需要的插件
4. 在package.json中的script部分添加运行webpack的命令'config':'webpack --config webpack.config.json'
5. 在cmd中执行npm run config
6. 查看生成的dist目录和目录下的bundle.js文件

webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/file.js',
  output: {
    path: path.resolve(__dirname , 'dist'),//
    filename: 'myfirstwebpack.bundle.js'
  }
};

注意

1. path是node自带的模块
2. entry填写要处理的文件的路径
3. filename是生成的文件的名称
4. 由于这个例子中没有使用其他插件，所以就不贴packgage.json的文件内容，下篇讲到插件时再写

有问题可以查看我的GitHub仓库