使用webpack+babel搭建一个前端工作流

在本篇文章中，我们将带领大家使用webpack+babel搭建一个完整的前端工作流，可以让大家初步体验到webpack的配置流程与babel与webpack的搭配方法。

需要准备

• git版本管理

• nodejs全局环境

• atom编辑器

• chrome浏览器

webpack介绍

初始化项目

1. git init

2. npm init -y

3. mkdir src && cd src && touch index.js component.js

4. touch index.html .gitignore README.md

5. 编写.gitignore README.md

基本命令

1. 安装webpack: npm install webpack --save-dev

2. 创建webpack的配置文件： touch webpack.config.js

3. 设置webpack.config.js

var path=require('./path');
var webkit=require('./webkit');
var config={
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
};
module.exports=config;

4. 在package.json中设置scripts："build:"webpack --progress --colors;

5. 运行build:npm run build

6. html页面测试：注意：在html页面中引入的是dist/bundle.js

webkit+babel 配置

1. 创建.babelrc文件，并添加编译规则：touch .babelrc {"presets:["es2015"]"}

2. 现在加载器和编译器

npm install babel-loader babel-core babel-preset-es2015 --save-dev

3. 配置webkit.config.js，在output对象下

module:{
    loaders:[
        {
            test:/\.js$/,
            loader:'babel-loader',//也可以写成babel
            exclude:'node_modules'
        }
    ]
}

处理模版文件

npm install html-webpack-plugin --save-dev

具体步骤：

1. mv index.html src

2. npm install html-webpack-plugin –save-dev

3. 在webpack.config.js中进行配置

//注意：plugins这里是数组
plugins:[
    title:'搭建前端工作流',
    template:'./src/index.html'
]

4. 在文件的title中写入:<%= htmlwebpackplugin.options.title="">;

5. 运行 npm run build之后，title中会自动填入标题和引入dist/bundle.js;

启用本地服务

• webpack-dev-server –save-dev

• 在package.json中进行配置"dev":"webpack-dev-server --progress --port 8080 --content-base dist --hot"

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » 使用webpack+babel搭建一个前端工作流