使用webpack搭建前端工作流

作者:zhanglei日期:2017-01-19 17:55:09 点击:352

 使用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;
  1. 在package.json中设置scripts:"build:"webpack --progress --colors;
  2. 运行build:npm run build
  3. 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
  1. 配置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'
]
  1. 在文件的title中写入:<%= htmlWebpackPlugin.options.title %>;
  2. 运行 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"

上一篇: 微信小程序基础教程(逻辑层 APP Service)

下一篇: NODE开发中的一些基础知识