从0开始配置babel、webpack构建项目

最新推荐文章于 2022-01-11 23:20:50 发布

一波万波

最新推荐文章于 2022-01-11 23:20:50 发布

阅读量508

点赞数

分类专栏： javascript 文章标签： webpack babel es6

本文链接：https://blog.csdn.net/yibowanbo/article/details/80233016

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

从0开始配置webpack，babel项目

开始工作：新建一个新建文件夹名字：webpack，要安装有node，npm环境

npm init

初始化话一下,那么项目开始

一、让项目支持ES6语法，配置babel

项目安装babel包

npm install –save-dev babel-core babel-preset-es2015 babel-preset-latest –registry=https://registry.npm.taobao.org

然后再src同目录下，新建 .babelrc 文件，写入内容：

{
  "presets": ["es2015", "latest"],
  "plugins": []
}

全局安装babel命令

sudo npm install -g babel-cli

测试全局安装babel成功，babel --version

直接编译入口文件：babel src/index.js

二、开发环境 - webpack

npm install webpack babel-loader –save-dev –registry=https://registry.npm.taobao.org

如果webpack升级到4.0.1，执行webpack命令报错：（无报错跳过）

webpack -v
The CLI moved into a separate package: webpack-cli.
Please install ‘webpack-cli’ in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

按错误提示，webpack单独分离出了wepack-cli，需要我们安装wepack-cli。

全局安装：

npm i -g webpack-cli
- 全局安装webpack-cli后，使用webpack -v成功。

在项目本地安装webpack，webpack-cli：

npm install webpack webpack-cli -D

安装完成后，新建一个 webpack.config.js，进行配置：

// -| webpack.config.js
module.exports = {
  // 入口文件
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './build/bundle.js'
  },

  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader'
    }]
  }
}

在package.json 的 script下”start”: “webpack”,


// package.json
"scripts": {
    "start": "webpack",
},

然后进行webpack进行打包

npm start （实际上是进行了webpack命令，上面配置了start”: “webpack）

// 一般打包成功后：
Bob:webpack-wfp liangfengbo$ npm start

> webpack-wfp@1.0.0 start /Users/liangfengbo/Documents/study/frendend_javascript_interview/ES6/webpack-wfp
> webpack

Hash: ec3e9fdf828d7f3758d8
Version: webpack 4.5.0
Time: 1238ms
Built at: 2018-4-9 21:43:57
            Asset       Size  Chunks             Chunk Names
./build/bundle.js  912 bytes       0  [emitted]  main
Entrypoint main = ./build/bundle.js
   [0] ./src/util2.js 206 bytes {0} [built]
   [1] ./src/util1.js 115 bytes {0} [built]
   [2] ./src/index.js 328 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Bob:webpack-wfp liangfengbo$


看这个 Entrypoint main = ./build/bundle.js 就是已经打包成功了

如果打包成功了，在根目录下新建一个index.html文件测试一下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>babel</title>
</head>
<body>
  <!-- 引入打包成功的文件 -->
  <script src="./build/bundle.js"></script>
</body>
</html>

如果本地没有静态资源服务器的话，可以使用朴灵大大的anywhere

npm install anywhere -g

安装好静态资源服务器后就可以跑了：

anywhere -p 8000

浏览器里直接输入：http://192.168.1.119:8000/index.html

看看是不是大功告成了！

github仓库地址

一波万波

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0开始配置babel、webpack构建项目

从0开始配置webpack，babel项目开始工作：新建一个新建文件夹名字：webpack，要安装有node，npm环境 npm init初始化话一下,那么项目开始一、让项目支持ES6语法，配置babel项目安装babel包 npm install –save-dev babel-core babel-preset-es2015 babel-preset-...
复制链接

扫一扫