files.autoSave:"onFocusChange"

cross-env 包解决windows和mac等不同操作系统上环境变量配置的不同

css文件抽取分离 npm i extract-text-webpack-plugin

但是webpack4中已经无法使用extract-text-webpack-plugin。

这里对应的地方，可以修改成

 npm install --save-dev mini-css-extract-plugin

和

config.module.rules.push({
    test: /\.styl/,
    use: [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {publicPath: '../'}
     },
     'css-loader',
     {
         loader: 'postcss-loader',
         options: {sourceMap: true}
      },
      'stylus-loader'
      ]
    }
 )

和

config.plugins.push(new MiniCssExtractPlugin({filename: 'style.[contentHash:8].css'}))

使用 Extract-text-webpack-plugin 插件，配置 css 单独分离打包

在生产环境中，单独配置 mogule.rules 选项

config.module.rules(
    {
        test: ExtractPlugin.extract({
            fallback: 'style-loader',
            use: [
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                },
                'stylus-loader'
            ]
        })
    }
)

config.plugins.push(
    new ExtractPlugin('style.[contentHash:8].css')
)

为什么需要前端工程？

因为我们会用到LES，ES6等以提升我们的开发效率，但是这些工具又不能直接被浏览器识别。所以需要找到一个平衡点！

webpack4.0基本配置

const path=require('path');
const {VueLoaderPlugin}=require('vue-loader')

module.exports={
    mode:'development',
    entry:path.join(__dirname,'src/index.js'),
    output: {
        filename: "bundle.js",
        path:path.join(__dirname,'dist')
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.styl$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test:/\.(jpg|jpeg|png|svg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name]-lyb.[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

Vue-loader+webpack配置（视频发布时webpack4.0还未发布，视频中用的是webpack@3.10.0，有些配置和依赖可能不要引入，具体的可以去webpack官网查看）

1. 初始化项目：npm init,一直回车，就可以创建一个package.json文件

2. 安装webpack，vue,vue-laoder : npm i webpack vue vue-loader --save。视频中没加--save是全局安装，i 是 install的简写，这样安装的版本默认的都是最新的版本，如果要安装视频中的版本需要在名称后面添加@+版本号，如webpack@3.10.0.

3. 按照npm中出现的提示安装提示的其它依赖，如果没有就不用安装

4. 创建源码放置目录文件夹 src,并在内部创建文件app.vue作为框架结构的基础组件（最父级组件），之后声明的子组件都要放到这个父组件内部才能生效。

   
   

<template>
     <!--相当于结构html-->
     <div id="text">{{text}}</div>
 </template
 
 <script>
     <!--js-->
     export default {
         data(){
             return{
                 text:"hello vue"
             }
         }
     }
 </script>
 
 <style>
     <!--样式css-->
     #text{
         color:red;
     }
 </style>

    5.创建配置文件webpack.config.js

    6.创建入口文件index.js，并用render方法渲染页面，$mount()挂载页面到HTML

1、webpack-dev-server 为开发环境服务

2、cross-dev 包, 跨平台设置环境变量，因为在mac平台和window平台设       置环境变量的方式不同，使用这个包就可以兼容不同平台

3、配置方式

        --  生产环境 cross-env NODE_ENV=production

        --  开发环境 cross-env NODE_ENV=development

4、在webpack.config.js中配置开发环境

        --  判断是否为开发环境

const isDev = process.env.NODE_ENV === 'development'

        --  配置开发环境

    if(isDev) {
      config.devServer = {
         port: 8000,
         host: '0.0.0.0',
         overlay: {
          errors: true  // 配置后错误可以显示在网页中
         }
      }
    }

5、安装 html-webpack-plugin，可以生成html入口文件、为html文件        引入外部资源

6、cofig.devtool = '#cheap-module-eval-source-map'用来开启             source-map

7、开启热更新，在config.devServer中配置hot: true

8、配置新的插件

config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
)

webpack^4.0.0 使用 vue-loader 步骤：

1、安装 vue-loader；

2、安装 vue-template-compiler， vue-loader 需要依赖 vue-template-       compiler

3、webpack位置文件，在 module.rules 中配置

            {

            test: /\.vue$/,

            loader: 'vue-loader'

            },

4、在webpack位置文件引入 vue-loader-plugin，在 plugins 数组中配       置  new VueLoaderPlugin()

前端工程

webpack

vue

--------------------------------------------------------------------------

配置开发时前端工程

实现一个简单的TODO应用

优化配置达到上线标准

--------------------------------------------------------------------------

搭建前端工程

网络优化

    -- 加快HTTP请求速度

    -- 缓存HTTP请求

API定制

    -- 前后端分离

    -- API请求

    -- 与后端交流，理解后端API是如何实现的

node层

    -- 使用node做请求转发和处理

css样式

单页应用会做很多前端路由，页面地址不一定就是index.html的地址，帮助把别的页面地址映射到index.html上面去

使用vue、react等框架的时候

判断环境，框架根据不同环境区分打包