前端项目目录的搭建和准备工作

前言：一个良好目录的搭建有利于开发的速度和结构的清晰。

一、先在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命令区改变端口号