Webpack起步：纯Webpack配置

Posted 2021-04-29 FrontEndTips

直入主题，由浅入深

实现javascript由es5转换到es6格式，来熟悉所谓的打包和编译过程。

1. 新建文件夹名称 webpack

2. 使用命令提示操作（cmd）npm init

3. 根据提示一步步确认

4. 最终会生成package.json文件，此时有效内容基本是空白，一个正常的package文件至少有script选项和依赖包列表

5. 添加script和依赖

   "scripts":{

      "build":"babel es6 -d js --watch"

   }

6. 通过npm install下面的包

   babel-preset-es2015,babel-cli,babel-preset-env

7. 新建.babelrc文件，内容：

   { "presets":["env"] }

   以上是其中一种将es6转es5的方式，命令中es6是指文件夹名，js就是存放转换后的js文件夹；"--watch" 处于监听模式

在es6文件夹新建任意js文件，写入es6语法，然后cmd中运行npm run build，可以看到js文件夹下有同名文件，但是语法是开启严格模式的纯es5语法。

现在我们使用webpack来实现以上单一需求。

步骤如下：

1. 新建新文件夹名任意，如 webpack-es6-5

2.npm init 

3.新建es6 es5文件夹目录；.babelrc文件；webpack.config.js配置文件

4.依次下载依赖babel-loader、babel-core、babel-preset-es2015到项目，全局安装webpack

5.补充好配置文件信息：

.babelrc

 {"presets":["es2015"]}

webpack.config.js

6.在test.js中写es6语法的代码，保存，命令行中输入webpack执行，
即会进行webpack工作，在es5文件目录下产生一个名为app.bundle.js的新文件，通常页面中引入此文件。