前言:一个良好目录的搭建有利于开发的速度和结构的清晰。
一、先在coding或者GitHub上创建项目
这里详见:https://blog.csdn.net/qq_38588845/article/details/101284477
二、npm的使用和初始化
1.npm的使用
①解析:(xxx代表安装的东西,v.v.v表示版本号,-g表示全局安装)
安装依赖包:npm install xxx@v.v.v
卸掉依赖包:npm uninstall xxx@v.v.v
参数:-g
②npm init的初始化(最后会生成一个package.js的文件,文件里面是初始化的信息)
输入npm init回车
出现以package name:(mmall-fe)字段结尾的一段内容,多次回车填入相对应的信息description:mmall前端代码
entry point:(index.js)
test commond:
git repository: (git@gitee.com:yqfhappymmall/mmall-fe.git)
keywords:
author: Rosen
license: (ISC)
在Is this ok? (yes)的后面输入yes 后回车
三、webpack的使用和搭建
1.webpack的使用
①加载方式:各种loader插件;编译方式:conmmonjs模块->function类型模块
②安装:
(1) npm install webpack -g进行全局安装 需要权限时加sudo 例如:sudo npm install webpack -g 出现这个+ webpack@3.10.0表示安装成功
(2) 本地进行安装npm install webpack@1.15.0 --save-dev
输入ls出现node_modules/ package.json package-lock.json 可以输cd node_modules/进去输入ls进行查看加载的内容
其中--save表示安装开发环境和上线都需要的包,--save-dev仅表示用于开发环境
2.webpack.config.js用于管理配置文件
- entry:js的入口文件
- externals:外部依赖的声明
- output:目标文件
- resolve:配置别名
- module:各种文件,各种loader
- plugins:插件
其中html-loader,js的babel-loader,css中style-loader+css-loader是最常用的
3.webpack-dev-server的使用
作用:前端开发服务器
特色:可以在文件改变是很好,自动刷新浏览器
安装:npm install webpack-dev-server --save-dev
配置:webpack-dev-server/client?http://localhost:8088
使用:webpack-dev-server --port 8088 --inline
4.webpack基础配置文件
1.在根目录下建一个webpack.config.js文件,填写webpack.config.js一系列内容
2.在MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0) $中输入webpack进行打包 (如果是装在文件中,则用npm start),其中start是在package.js中的scripts中配置好的("start": "webpack")
5.webpack对脚本和样式的处理
①.CommonsChunkPlugin的使用(对公共模块进行打包,但是到了webpack4.0后就被废除了)
②.写好入口文件和出口文件
③.css样式采用css样式的loader
(1)先安装css-loader和style-loader
npm install css-loader style-loader --save-dev
(2)使用{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")},
(3)//是对css的单独打包到文件里
new ExtractTextPlugin('css/[name].css'),
6.html模板的处理
{ test: /\.string$/, //处理动态html文件 loader:'html-loader', query:{ minimize:true, //是否删除属性上的引号,false表示不删除 removeAttributeQuotes:false } }
//获取html-webpack-plugin参数的方法 var getHtmlConfig = function(name, title){ return { //这段代码是将page中common的index.js与view中index.html(template)做关联 template:'./src/view/'+name+'.html', //输入的html的文件名称 filename:'view/'+name+'.html', title:title, //true:默认值,script标签位于html文件的 body 底部 inject:true, //放title上面的图标 favicon:'./favicon.ico', //哈希值 hash:true, //这个common是下面entry的common,name也是entry里面的键 //chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件 chunks:['common',name] } }
然后plugins里面写入
new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
未来有多少新增的页面都可以这么写
还有前端页面可以使用
<%= require('html-loader!./layout/head-common.html')%>和<%= htmlWebpackPlugin.options.title%>进行公共的处理
7.图片和字体的处理
在loader里面加入{test: /\.(jpg|png|gif|woff|svg|eot|ttf)\??.*$/,loader: 'url-loader?limit=100&name=resource/[name].[ext]'},
8.webpack-dev-service的使用
//为了方便使用 "scripts": { "dev": "set WEBPACK_DEV=dev && webpack-dev-server --inline --port 8088", "dist": "set WEBPACK_DEV=online && webpack -p", "start": "webpack" },
//环境变量配置,dev/online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';//判断是开发环境还是本地环境
if('dev' === WEBPACK_ENV){//开发环境
config.entry.common.push('webpack-dev-server/client?http://localhost:8088');
}
用webpack-dev-server --inline --port 8088命令区改变端口号