webpack创建,集成vue

1.webpack是什么：是一种静态资源构建，打包的工具
2.会wepbakc的前置知识：会用node.js安装一个包( npm install xxxx --save-dev)
3.webpack核心：

• entry:入口
• output:出口
• loader:资源转换器
• plugin:插件
• mode:模式
  4.webpack目前最新稳定版本：4.43

还有其他的打包压缩工具：
grunt：https://www.gruntjs.net/
gulp：https://www.gulpjs.com.cn/
fis3(百度)：http://fis.baidu.com/
webpack：https://webpack.js.org/

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

把webpack用起来
1.创建一个项目目录：webpack_vue

2.创建一个package.json文件

npm init -y

3. 安装webpack,webpack-cli

  npm install webpack webpack-cli --save-dev
   简写：
   npm i webpack webpack-cli -D

通过 ./node_modules/.bin/webpack -v 来检查是否安装成功
4.在项目根目录下创建一个src，并建立一个index.js
5.在项目根目录下运行npm run build
会构建成一个dist目录，并生成一个main.js文件
wabpack4.x 默认是零配置：
即默认的入口：src/index.js
默认的出口：dist/main.js
手动配置：
入口：src/main.js
出口：dist/bundle.js
6.如果手动配置，必须要创建webpack配置文件，来执行
默认webpack配置文件：webpack.config.js
如果运行指定的配置文件，而不是默认的webpack.config.js，则在通过scripts运行时添加–config
例如：

"scripts": {

  "build": "webpack --config webpack.dev.config.js",
  "dev": "webpack-dev-server"
}

黄色警告如何解决：通过配置mode
** 如何自动清理打包的垃圾文件：**
第一步：

    npm install --save-dev clean-webpack-plugin

第二步:

在webpack.config.js中引入

       const { CleanWebpackPlugin } = require('clean-webpack-plugin');

第三步：通过plugins实例化

 module.exports = {
               ...
                plugins: [
                new CleanWebpackPlugin(),
        
                ......
     };

基于webpack的服务器环境：webpack-dev-server;

   npm install webpack-dev-server -D

通过devServer来配置:port,baseContent

 devServer: {
            port: 9999,
            contentBase: path.join(__dirname, 'dist'),
        }

如何实现自动构建构的文件自动注入index.html:

在 安装html-webpack-plugin

    npm install html-webpack-plugin

    引入：

    const HtmlWebpackPlugin = require('html-webpack-plugin');

添加到plugins中：

 plugins: [
         。。。
        new HtmlWebpackPlugin({
            template: './index.html',  //读取模板的入口文件
            filename:'index.html'  //生成打包后的html文件
        }),
    ]

说明：webpack可以将node服务端的JS代码通过构建直接运行在浏览器上
webpack支持多种模块化规范：AMD,CMD,CommonJS,ES6 modules
webpack默认识别的文件：.js,.json文件格式
loader：让webpack识别其他类型的文件，例如：css,png,svg,less,sass…
识别css:style-loader,css-loader

问题：运行npm特别慢，那就改一下npm镜像

npm config set registry https://registry.npm.taobao.org

查看修改的配置：npm config list
webpack如何指定多入口：通过给entry添加对象形式配置多入口

entry: { "index": "./src/main.js", "home":"./src/home.js" }, output: { //设置项目的输出目录 path: path.resolve(__dirname, "dist"), //输出的文件名 filename: "[name]_[hash:8].js" //chunk },

webpack识别less:

npm install less less-loader -D

webpack识别sass:

npm install sass-loader node-sass -D

sass常用教程：https://www.cnblogs.com/chyingp/p/sass-basic.html

webpack识别图片或其他文件

npm install url-loader -D

集成vue:
安装ES6的包：babel

1.npm install --save-dev babel-loader @babel/core @babel/preset-env
2.配置webpack 安装Vue包
```bash
//webpack通过loader识别文件的匹配规则
    module:{
        //css的配置
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(sass|scss)$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|jpeg|png|gif)$/,use:['url-loader']},
            //babel-loader意思排除node_modules外的.js文件，           {test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
        ]
    }

3.在项目根目录下创建.babelrc配置文件
{
“presets”: ["@babel/preset-env"]
}

4、编译template模板，安装vue包：命令npm install vue vue-loader vue vue-template-compiler -D
在src文件下新建main.js文件，进行配置
```bash
import Vue from 'vue'
import App from './App.vue'
new Vue({
    el:"#app",
    render:(h)=>h(App)
})

在webpack.config.js文件中引入，并在plugins中实例化插件，vue就集成了

const VueLoaderPlugin=require('vue-loader/lib/plugin')
	// 里面可以放各种插件
    plugins:[
        //添加文件清理的插件
        new CleanWebpackPlugin(),
        new HtmlwebpackPlugin({
            //可以实现热更新，类似与ajax
            hot:true,
            //让这个文件为入口  读取模板的入口文件
            template:"./index.html",
            //最会将index.html输出到dist文件夹中 
            filename:'index.html',
        }),
        new VueLoaderPlugin()
    ],

这时有个地方：package.json文件中

"dependencies": {
    "vue": "^2.6.11",   //最好是放在dependencies中 
					      通过命令npm install vue -S   
					      如果"vue": "^2.6.11",在devDependencies中，
					      通过npm uninstall vue -S卸载掉，在安装npm install vue -S 
    "vue-router": "^3.1.6"
  }

5、在vue中集成路由的设置，vuex的设置
命令：Vuex: npm install vuex -S； 路由：npm install vue-router -S；
路由的配置，在src文件下创建router文件夹，新建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
import Home from '../pages/home.vue'
import About from '../pages/about.vue'

//配置路由
const routes = [
    { path: "/home", component: Home, name: "Home" },
    { path: "/about", component: About, name: "about" },
]

在main.js中将router挂载到vue实例上

import Vue from 'vue'
import App from './App.vue'
//引入router文件
import router from './router/index'
//引入vuex store文件
import store from './store/index.js'
new Vue({
    el:"#app",
    router,
    store,
    render:(h)=>h(App)
})

在App.js中

<template>
    <div>
        <h2>APP.vue文件</h2>
       //router-view就是让路由内容显示的地方
      <router-view></router-view>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
    </div>
</template>
<script>
export default {
    name:"app",
    data() {
        return {}
    },
}
</script>
<style></style>

Vuex的配置，在src文件下创建store文件夹，新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//state
const state={
    count:0,
};
//action
const action={

};
//mutations
const mutations={
};
//getters
const getters={

};
export default new Vuex.Store({
    state,
    action,
    mutations,
    getters
})