脚手架搭建流程小结
来源:互联网 发布:移动端域名怎么解决 编辑:程序博客网 时间:2024/04/30 08:23
1.为什么会有这个文章
前端工具的演化,可以说应接不暇。我在具体业务实践中,尝试和接触过grunt,fis,glup等脚手架的流程。在应用这些工具的过程中,对开发流程模棱两可,虽说是简单的打包,转译,压缩,混淆等等,但具体实现起来,怎么优化等等甚至路径的配置等等,都需要实践才能领会。学习操作系统最好的方式就是做系统,那么学习脚手架的流程,最好的方式也应该如此。首先需要梳理一下前端开发常见的工作流:
一般的前端在开发过程中常用的资源只有HTML,CSS,JS和一些图片资源,可能会存在少量的音频甚至视频资源。对于这些,我们早已不是直接在编写HTML和CSS文件了。HTML可以用插件生成,CSS可能会遇到预编译工具,常见如LESS,SASS,JS使用方式更多样,有适用于大型系统的超集JS:TypeScript,也有可以转义ES6的Babel,如果使用了某种MVVM模式的框架,如react,vue,其中丰富的JSX语法和组建的概念,使得前端的开发流程大放异彩的同时,也提升了可维护性。在webpack作为前端脚手架的灵魂般存在的同时,我们在不同的阶段:开发,部署,上线都有着不同的需求,这其中必然要使用不一样的插件,脚本去实现目的。
2.如何实现
这是packjson.json的配置
{ "name": "toddmark", "version": "1.0.0", "description": "build a custiom blod ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rm -rf build && webpack", "release": "git add . && git commit -m \"/****** release ******/\" && git push ", "dev": "cross-env NODE_ENV=development node dev-server.js" }, "repository": { "type": "git", "url": "git+https://github.com/toddmark/toddmark.git" }, "author": "Todd Mark", "license": "ISC", "bugs": { "url": "https://github.com/toddmark/toddmark/issues" }, "homepage": "https://github.com/toddmark/toddmark#readme", "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "cross-env": "^3.1.3", "css-loader": "^0.26.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-loader": "^0.4.4", "html-webpack-plugin": "^2.24.1", "imports-loader": "^0.7.0", "less": "^2.7.1", "less-loader": "^2.2.3", "react-hot-loader": "^1.3.1", "style-loader": "^0.13.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }, "dependencies": { "bootstrap": "^3.3.7", "d3": "^4.4.1", "jquery": "^3.1.1", "react": "^15.4.1", "react-d3-library": "^1.1.7", "react-dom": "^15.4.1", "react-router": "^3.0.0" }}
这是一段webpack.config.js的配置。
const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require("extract-text-webpack-plugin");let isDev = false;const env = process.env.NODE_ENV;isDev = env === 'development' ? true : false;console.log(isDev ? '开发环境' : '生产环境');module.exports = { entry: { vendor: ['jquery', 'bootstrap'], index: ['./index.js'] }, devtool: 'source-map', output: { path: path.resolve('build'), publicPath: isDev ? '/' : `./`, filename: '[name]-[hash].js' }, // externals: { // react: 'React', // 'react-dom':'ReactDOM', // }, module: { loaders: [{ test: /\.html$/, loader: 'html' }, { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.(eot|woff|ttf|eot|woff2)$/, loader: "file-loader" }, { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'] }, { test: /.*\.(gif|png|jpe?g|svg)$/i, loader: "file-loader?name=img-[sha512:hash:base64:7].[ext]" },{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' } ] }, plugins:[ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"), new HtmlWebpackPlugin({ template: 'template/index.html' }) ].concat( isDev ? new webpack.HotModuleReplacementPlugin() : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ] )}
package.json没啥好说的,纯粹的包管理目录文件,详细的文档可以在这里看到。我们在这里配置的一些简单的脚本,如下:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rm -rf build && webpack", "release": "git add . && git commit -m \"/****** release ******/\" && git push ", "dev": "cross-env NODE_ENV=development node dev-server.js" },
【build】顾名思义是用来编译用于发布的文件。【release】当然就是提交编译记录并且自动发布的意思。这其中有个【dev】是用来开发时使用,有一段不常见的标记cross-env
,这个是为了兼容window下的NODE_ENV配置才引入的。我们可以看到,当使用开发脚本时,CLI会两件事:1,设置node环境。2,在node环境中使用dev-server.js脚本。如下:
const webpack = require('webpack');const config = require('./webpack.config.js');const port = 8000;config.entry.index.unshift(`webpack-dev-server/client?http://localhost:${port}/`, 'webpack/hot/dev-server');const WebpackDevServer = require('webpack-dev-server');const compiler = webpack(config);const server = new WebpackDevServer(compiler, { hot: true, stats: { colors: true, chunks: false }})server.listen(port);console.log(`Listenting at http://localhost:${port}`);
可以看到,这段脚本里,我们使用了webpack.config.js的一些配置内容。然后开启了热价在模式,当执行完毕,我们的开发服务器也就启动成功了。可以看到这里我们使用了自动刷新的脚本()The webpack-dev-server supports multiple modes to automatically refresh the page),并且开启了热替换模式。
- 脚手架搭建流程小结
- 搭建Vue脚手架
- node.js脚手架搭建
- webpack 脚手架搭建
- Vue框架脚手架搭建
- vue.js脚手架搭建
- vue-cli 脚手架搭建
- 002 搭建项目脚手架
- 脚手架搭建react项目
- 搭建vue-cli脚手架
- vue脚手架搭建
- vue脚手架环境搭建
- 搭建ES脚手架相关问题
- vue-cli脚手架的搭建
- Vue-Webpack简单脚手架搭建
- vue-cli简易脚手架搭建
- Vue 搭建脚手架--vue-cli
- 命令行搭建vue-cli脚手架
- 页面加载过慢之代码优化解决方案
- (Windows)定时删除某目录下几天前的文件
- PostgreSQL学习篇9.10 枚举类型
- Java对象的序列化与反序列化
- 网络传输协议概念和HTTP协议
- 脚手架搭建流程小结
- CXF客户端调用N种方式
- 【SSLGZ 1409】(树)哈夫曼树(三)
- android中如何为设置了背景图的按钮自定义动画
- OpenGL学习02_函数语法与命名规范
- Spring session
- HTML学习笔记:HTML开发常见问题
- 如何在ecshop后台左侧菜单中增加新菜单项
- AndroidStudio插件开发(Hello World篇)