基本环境

• 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"