一、webpack配置

webpack的介绍及配置：

一、介绍：

Webpack可以看做是模块打包机，将html，js，css,图片等文件，做打包模块的操作，
能做什么：
1、对commonJs，AMD，ES6的语法做兼容，对js、css、图片等资源文件打包（适合团队开发）比如：我写一个js文件，他写一个js文件，合并比较麻烦，通过webpack合并就简单，有独立配置文件webpack.config.js
2、把浏览器不认识的js，sass，vue,等待代码，将其打包成为合适的格式供浏览器识别使用。

问：
vue脚手架工具 React脚手架工具为什么能直接使用sass,路由等等 就是因为底层做了webpack打包操作。

相关目录：
–src：代码开发目录，
–build：开发环境webpack编译打包输出目录，同样按照view、styles、js组织
–dist：生产环境webpack编译打包输出目录，同样按照view、styles、js组织
–node_modules：所以使用的nodeJs模块
–package.json: 项目配置
–webpack.config.js: 开发环境webpack配置
–webpack.production.config.js: 生产环境webpack配置

二、简单配置webpack：

前期配置：新建package.json页面，用来记录下载那些模块，在这个文件中配置npm run …

"scripts": {
"dev": "webpack --mode development --watch", //开发环境使用，watch监听修改，一旦修改就会自动更新。(npm run dev)
"build": "webpack --mode production", //生产环境使用，也就是上线打包 (npm run build)
"start": "webpack-dev-server --mode development"//保存后浏览器自动更新(npm run start)
},

1、npm 下载webpack和webpack-cil

安装：npm install webpack webpack‐cli ‐‐save‐dev（局部安装）
注：默认入口是src/index.js (告诉webpack从哪里开始，并依赖关系图确定需要打包的文件内容)
出口是dist/main.js （告诉webpack打包好后放入哪里）

2、入口与出口及单页面与多页面:

a、在页面新建webpack.config.js文件 做配置。
b、代码运行之后找到这个文件，如果有就执行webpack.config.js里的配置的入口和出口，如果没有就执行默认的src入口，生成到dist文件(出口)，

webpack.config.js文件夹：
module.exports = {
// 配置入口
 entry : {
// 语法：key  :  value 
               key文件名
                value：入口文件地址
 a : __dirname+ '/src/index2 .js / '  //地址，要配置哪个文件 可以有多个
b : __dirname+ '/src/index2 .js / '
},
//配置出口，
output: {
 path: __dirname+ '/dist', //要生成配置的出口文件，配置到哪里
 filename: "[name ]. js" // 生成文件的文件名，[name] 就使用上面默认的 a和b
publicPath:'/dist’//执行代码后生成虚拟dist/a 和b.js目录 我们看到不到，但是存在，所以才能执行相关的打包后的操作
}
}

2.1、webpack-plugin插件：

作用：将js插入到public文件夹里面的index.html文件里，然后就可以直接打开这个文件在页面上显示。

2.2、clean-webpack-plugin插件：

作用：再次打包的时候，上次打包的代码还遗留下来，可能出现问题，所以每次打包的时候就清楚上一次的dist文件。就用这个插件
注：（使用方法需要去官方文档看，webpack文档有问题！）

3、保存浏览器实时刷新，webpack-dev-serve

安装：npm install webpack-dev-server
配置代码：

在package.json 配置 state: "webpack-dev-server --mode development"

配置在webpack.config.js文件夹：

devServe: {
 contentBase: './'   以当前目录为根目录(localhost:8080)
 port: ' 8080’//端口号
 inlin : true  // 实时刷新
}
注：不会执行这个命令后不会生成dist文件，但是会生成虚拟dist目录

4、source-map 生成映射文件，映射源代码目录

作用：当打包后，配置这个文件就 可以很轻松查找到报错信息，映射除源代码中的错误信息。

配置在webpack.config.js文件夹：

devtool:"source-map", //生成映射文件， 映射源代码目录
注：上线时就不需要，只供开发使用。

5、loaders配置：

处理浏览器不认识的语法，和兼容性问题。

分为：1、css——loaders style——loaders 将css文件当成模板处理
3、scss ——loaders （同时安装node-sass）编译scss生成css文件
4、vue——loadersvue-template-compiler 编译vue文件
5、file——loaders url-loader 文件copy到目标文件夹
6、post-csss postcss-loader autoprefixer postcs 处理css兼容问题

a、 css——loaders style——loaders
安装：npm i css-loader style-loade --save-dev
为什么要配置这两个loader?:
用来处理scc和style 在模块中引入能使用（js通过require引入时使用）

require("./css/index.scss") // webpack只识别 js模块，css-loader style-loader (把css当成模块来处理)
// commonJS 规范 导入了一个模块

代码配置

配置在webpack.config.js文件夹：

module: { //固定写法
rules: [ //固定写法，下面开始配置各种loader
{  
//  配置style和css模块
test: /\.css$/, //1、正则匹配以.css结尾的
// loader: 'style-loader!css-loader' //2、添加对样式表的处理,内联样式,从右到左读取
loader: 'style-loader!css-loader!postcss-loader'
},

b、解决css的兼容性问题：
有的css不兼容低版本浏览器，如：display: flex ，对他们做兼容操作。
安装：npm i postcss-loader autoprefixer postcss

代码配置：（新建一个postcss.config.js配置文件）、配置完成之后，需要在css和scss中添加一个配置 postcss-loader

配置在postcss.config.js文件夹：
module.exports = {
plugins: [
// require('autoprefixer')('last 100 versions' )
require('autoprefixer')(
    { overrideBrowserslist:
        [           //兼容相关浏览器的版本号
             'last 10 Chrome versions', 
            'last 5 Firefox versions',
            'Safari >= 6',
            'ie> 8',
            'iOS >= 8',
            'Android >= 4.4'
       ]
   }
)
]
}

c、scss编译成css文件，让他支持sass语法：
webpack支持sass语法
安装：mpm i sass-loader node-sass --save-dev (必需要安装node-sass）

代码配置：

配置在webpack.config.js文件夹：
{
test: /\.scss$/, 找到.scss结尾的
// loader: 'style-loader!css-loader!sass-loader'
loader:'style-loader!css-loader!postcss-loader!sass-loader' //添加对样式表的处理,内联样式,postcss-loader是兼容css的操作
},

d、babel——loaders 将es6代码转换成es5代码，提升语法的兼容性：
例：箭头函数支持高本版浏览器，让他兼容低版本浏览器就这用这个方法
安装：npm i babel-loader@7 babel-core babel-presetes2015 --save-dev

代码配置：

配置在webpack.config.js文件夹：
{
test: /\.js$/, //随便起的test 名字
exclude: /node_modules/, //排除一个
// exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
loader: 'babel-loader',
query: {
presets: ['es2015'] //转成es5语法
}
},

e、vue——loaders 配置vue模块
让普通代码拥有写vue的能力，打包后生成vue模块。
安装：npm i vue-loader vue-template-compiler --save-dev

配置代码：

配置在webpack.config.js文件夹：
var {VueLoaderPlugin} = require("vue-loader") // {VueLoaderPlugin:function(){ //拿出插件支持
module.exports = {
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
plugins:[
//vue 编译需要插件的支持
new VueLoaderPlugin()
]
}

index.js文件中

//初始化vue
new Vue({
render:h=>h(App) // App 是kerwin自己创建的根组件
}).$mount("#app")

九、集成eslint代码检测工具：

1、安装：
npm install eslint-loader --save-dev
npm install eslint --save-dev
2、
配置webpack.conifg.js
注：代码检测必需在babel编译成es5之前检测，所以加上nforce: "pre"这行代码

  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['eslint-loader'],
    enforce: 'pre'   /**/在babel编译之间进行代码检测
  })

2.1、让报错显示在浏览器，而不是控制台加上，在devServer里面加上overlay:{errors: true }

  config.devServer = {
    port: 8000,
    contentBase: path.resolve(__dirname, './public'),
    open: true,
    hot: true,   // 开启热更新
    overlay: {    /**/ 报错时的浮层到浏览器上面来，而不是在控制台**
      errors: true
    }
  }

3、在根目录新建eslintrc.js文件

{
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
  "rules": {
      "semi": 0, /**/ **为0的时候表示不需要分号结尾，为1的时候表示必需要分号结尾**
  }
}

`注`：semi 想及相关配置 ，0表示取消设置——1表示警告——2表示弹出报错
 error是弹出报错——off是取消当前设置

十、集成react

流程：
1、安装：
cnpm install react -S //定义组件
cnpm install react-dom -S //渲染DOM

2、在src目录下新建App.js写相关的react代码：

import React from  'React' //引入react核心
export default class App extends Component{
    constructor(props) {
        super(props)
    }
    render() {
        return(
            <div>
                <h1>你哈</h1>
            </div>
        )
    } 
}

2.1、然后在min.js入口js文件引入这个App.js组件，会报jsx错不能识别，需要下载jsx插件识别这个语法。babel官网配置中找到 react和env
1、安装：
react识别jsx规则的插件：——npm install --save-dev @babel/preset-react
env最新的es6转es5的规则：——npm install --save-dev @babel/preset-env
然后配置：
在项目根目录下新建.babelrc.json文件夹

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}
//react中的jsx规则和较新的js转es5语法