Webpack安装(1)-集成Babel
完整代码详见：https://github.com/lhtzbj12/webpack-demo
1、安装node.js、npm、cpm
安装node.js后，默认会安装npm，使用下面命令查看版本
node -v
npm -v由于npm比较慢（网络慢），安装模块时可使用cnpm代替，使用下面的命令安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org2、安装Webpack
在项目所有文件夹里执行（-y表示使用默认配置），会在文件夹里生成package.json
npm init -y通过下面命令，安装webpack到package.json文件中
cnpm install webpack --save-dev3、新建webpack.config.js，并新建src和build文件夹，分别用于存入源文件和生成的文件
//webpack.config.js
const path=require('path')
module.exports = {
entry:{
main:__dirname+'/src/main.js' //入口
},
output:{
filename:'bundle.js', //输出的文件名
path:path.resolve(__dirname,'build') //输出文件所在的目录
}
}文件夹结构如下
4、在文件夹src新建main.js，写入一些代码，主要测试ES6的新特性，内容如下：
//main.js
//let测试
let a = 1
{
let a=2
}
console.log(a)
//()=>测试
let b = [1, 2, 3, 4]
b.map((x)=>{
console.log(x)
})
//换行
let msg=`这是一段非常非常长的换行文字，ES6之前是用单引号和\，
现在可以直接用\`,很方便
是吧！`
console.log(msg)5、在build里新建index.html,用于测试效果
//build/index.html
<html>
<head>
<title>webpack demotitle>
head>
<body>
<script src="bundle.js">script>
body>
html>6、修改package.json，使用npm的命令执行webpack
...
"scripts": {
"build": "webpack",
},
...如此，可以在项目根目录，使用如下命令进行打包，在build文件夹里生成bundle.js（当前还没有安装Babel，因此打包生成的bundle.js里的代码仍是main.js里的代码）。build不是npm内置命令，因此需要使用run
npm run build7、安装webpack服务，启动这个服务后，会监听8080，可以通过localhost:8080进行访问，并且，会监视文件的修改，自动打包，自动刷新浏览器页面。使用下面命令进行安装
cnpm install webpack-dev-server --save-dev修改webpack.config.js
...
output:{
filename:'bundle.js', //输出的文件名
path:path.resolve(__dirname,'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
...修改package.json，使用npm的命令启动服务
...
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
...使用如下命令启动服务，服务运行过程中不会生成bundl.js文件。start为npm内置命令，因此不用run。
npm start8、安装Babel，用于将ES6+转换生成ES5代码，采用以下命令安装
cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react修改webpack.config.js，在module-rules下增加test，
...
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
}
]
}
...使用如下命令，打包新bundle.js
npm run build查看bundle.js，已经转成了ES5代码
//bundle.js
"use strict";
//let测试
var a = 1;
{
var _a = 2;
}
console.log(a);
//()=>测试
var b = [1, 2, 3, 4];
b.map(function (x) {
console.log(x);
});
//换行
var msg = "\u8FD9\u662F\u4E00\u6BB5\u975E\u5E38\u975E\u5E38\u957F\u7684\u6362\u884C\u6587\u5B57\uFF0CES6\u4E4B\u524D\u662F\u7528\u5355\u5F15\u53F7\u548C\uFF0C\n\u73B0\u5728\u53EF\u4EE5\u76F4\u63A5\u7528`,\u5F88\u65B9\u4FBF\n\u662F\u5427\uFF01";
console.log(msg)9、完整的package.json和webpack.config.js
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}webpack.config.js
const path = require('path')
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/main.js'), //入口
},
output: {
filename: 'bundle.js', //输出的文件名
path: path.resolve(__dirname, 'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
}
]
}
}