从0开始配置babelwebpack构建项目
Posted 一波万波
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从0开始配置babelwebpack构建项目相关的知识，希望对你有一定的参考价值。
从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
看看是不是大功告成了！
以上是关于从0开始配置babelwebpack构建项目的主要内容，如果未能解决你的问题，请参考以下文章
119. Spring Boot 加速你的maven构建——阿里云Maven仓库地址片从零开始学Spring Boot