注：我用的是webpack 2.4.1的版本；
基本环境
- git
- nodejs 全局环境
- atom 编辑器
- chrome 浏览器
搭建webpack的基本项目目录结构
- git init
- npm init -y
- touch .gitignore README.md
- touch index.html
-
mkdir src && cd src && touch index.js component.js
.gitignore
node_modules/
README.md
# 项目开发指导
## 基本环境
## 依赖技术栈
- webpack
- babel 语法解析
- es6/7 基本语法
- eslint 语法检查
- npm scripts 统一任务的构建
- react 组件化的基础类库
- mocha
- karma
## 如何开发
- npm install 安装所有依赖
- npm run build 跑项目
搭建webpack开发环境
- npm install webpack --save-dev
- touch webpack.config.js 创建webapck配置文件
var path=require('path');
var webpack=require('webpack');
var config={
//入口文件
entry:path.resolve(__dirname,'./src/index.js'),
//出口文件
output:{
path:path.resolve(__dirname,'./dist'),//出口文件路径
filename:'bundle.js'//出口文件名
}
};
module.exports=config;
- 配置package.json中的scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --progress" //这句是新加的，progress可以显示加载进度，如果想了解更多，可以通过 webpack --help
}
- 创建测试模块 component.js
//通过module.exports导出模块
module.exports=function () {
document.body.innerHTML='搭建开发环境';
};
- 在index.js引入新建的测试模块component.js
//此时是es5的引入方式
var components=require('./component');
components();
- 运行跑通基本流程：
npm run build; 就是scripts中的build；
运行之后，就会在当前项目下看到dist目录及里面的已经打包好的bundle.js文件
支持es6语法：webpack+babel
- 下载babel依赖的插件
npm install babel-loader babel-core babel-preset-es2015 --save-dev - 创建.babelrc文件，用来配置babel
{
"presets": ["es2015"],
"plugins":[]
}
- 配置webpack的模块
var path=require('path');
var webpack=require('webpack');
var config={
//入口文件
entry:path.resolve(__dirname,'./src/index.js'),
//出口文件
output:{
path:path.resolve(__dirname,'./dist'),//出口文件路径
filename:'bundle.js'//出口文件名
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,//哪些文件不需要使用babel-loader做处理
}
]
}
};
module.exports=config;
- 用es6重写测试文件
//component.js
export default function () {
document.body.innerHTML='搭建开发环境';
};
//index.js
import components from './component';
components();
- npm run build跑通流程，继续测试
自动产出html文件
- 安装插件
npm install html-webpack-plugin - 移动html文件到src目录下,作为模版文件
mv index.html src - 配置webpack.config.js,实例化插件html-webpack-plugin
//webpack中的新增设置
plugins:[
new htmlWebpackPlugin({
title:'搭建前端工作流', //标题
template:'./src/index.html'//模版文件的路径
})
]
-
更改模版文件，删掉引入的bundle.js(因为打包后，会自动引入)，并添加变量；
- 运行npm run build之后的index.html文件
搭建前端工作流