webpack配置-----有点乱。。。。

是前端的一个项目构建工具，基于nodejs开发出来的
安装的两种方式：

cnpm i webpack -g 全局安装
cnpm i webpack -D  安装到项目依赖中
作用：①能够处理js文件的相互依赖关系②能够处理js兼容问题，把高级的浏览器不能识别的语法转为低级的，浏览器能正常识别的语法

用法： webpack ./src/msin.jd  ./dist/bundle.js  前者转换为后者
webpack配置文件：webpack ./src/msin.jd  ./dist/bundle.js省略，直接 输入webpack就会自行打包

继续简化：以保存就自行打包：

cnpm i webpack-dev-server -D

在package.json里面的scripts里面添加：

--open自动打开浏览器

--port 3000 设置端口

--contentBase src 设置默认打开src文件

--hot 设置页面不刷新，只更新修改的部分

“dev”: “webpack-dev-server --open --port 3000  --contentBase src --hot”
保存完直接输入：npm run dev
webpack.config.js配置文件：

const path = require('path')
module.exports = {
    //指定入口文件
    entry: path.join(__dirname, './src/main.js'),
    // 指定输出文件
    output: {
        //指定输出文件路径
        path: path.join(__dirname, './dist'),
        //指定输出文件名
        filename: 'bundle.js'
    }
    // 当在控制台输入webpack时，webpack做了以下几步：
    // 首先它发现没有通过命令的形式指定入口和出口
    // 然后去找webpack.config.js文件
    //将文件按照这个配置文件进行打包
}

main.js

// 项目的入口js文件
// 1、导入jquery
//es6中导入其他模块的方式,浏览器不能识别，需要webpack
import $ from 'jquery'

$(function () {
    $('li:odd').css('backgroundColor', 'lightblue')
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'
    })

})

 

webpack打包好的内容没有放到根目录dist里面，而是放到根目录下的内存中
在页面中引入/bundle.js就行了,不引也行，到后面它自己会引
将html文件也放入内存中的插件：

第二个作用：将bundle.js自动追加到的页面中去

html-webpack-plugin将html文件也放入内存中：
安装：

cnpm i html-webpack-plugin -D
使用时需要在webpack.config.js里面导入
var htmlWebpackPlugin = require(‘html-webpack-plugin’)

再在配置节点中：

 plugins: [
        new htmlWebpackPlugin({
            // 指定模板文件路径
            template: path.join(__dirname, './src/index.html'),
            // 设置生成的内存页面名称
            filename: 'index.html'
        })
    ],

css样式main.js中的导入
import ‘./src/css/index.css’
但是webpack默认只能打包js文件，不能打包非js文件，如果需要打包css文件，需要手动下载第三方的加载器
cnpm i css-loader style-loader -D
再打开webpack.config.js文件，在配置插件的节点中加入module对象，里面有个属性rules,它是一个数组，里面存放了所有第三方插件的匹配和处理规则

配置处理less文件：

在main.js中导入：

require ‘./less/index.less’
和css文件一样要装一个依赖项，和less
cnpm i less loader less -D
回到webpack-config.js添加配置项
配置处理sass文件：

在main.js中导入：

require ‘./sass/index.scss’
cnpm i sass-loader -D

cnpm i node-sass -D

 

webpack无法处理css文件中的url地址相关的内容，要安装一个依赖项
cnpm i url-loader -D

cnpm i file-loader -D

新建匹配规则：

 

use里面是可以传参的：

处理字体文件的loader：
混入url-loader一样，不用下载了，直接载入配置项就行

es6语法处理babel-loader:
 

webpack只能处理一部分的es6语法，一些高级的语法它处理不了，需要第三方的loader

最新的babel已经不是这样配置的了但大致一样

详情（靠谱）：
babel-loader配置

在webpack构建的项目中使用vue开发

把vue包安装为项目运行依赖
npm i vue -S
在main.js里面里面引入vue:
import Vue from ‘vue’

这种引入方式引入的包不全面，需要在配置文件里加个配置项：

在根目录下创建login.vue文件

login.vue中向外暴露成员的方法：

在main.js里面引入

import 组件名 from ‘./login.vue’ 
默认webpack不能打包vue文件，需要第三方的loader：

cnpm i vue-loader vue-template-compiler -D

装完之后要加一个配置项：

{ test:/\.vue$/, use: ‘vue-loader’ }

再引入vue-loader里面的plugin

在plugins里面添加配置项（第二个）

在main.js的实例里面添加这个组件：
只能通过render函数实现

结合webpack使用vue-router
安装：
 cnpm i vue-router -S

创建几个模板文件并导入：

 

main.js:

console.log('ok')
import './css/index.css'
import './css/index.scss'
import './css/index.less'

 

import Vue from 'vue'
// 导入Account组件
import account from './main/Account.vue'
import goodList from './main/GoodList.vue'
import app from './app.vue'
import login from './subcom/login.vue'
import register from './subcom/register.vue'

//1、 导入vue-router包
import VueRouter from 'vue-router'
//2、 手动安装VueRouter
Vue.use(VueRouter)
// 3、创建路由对象
var router = new VueRouter({
    routes: [
       {
            path: '/account', 
            component: account,
            children: [
                {
                    path: 'login',
                    component: login
                },
                {
                    path: 'register',
                    component: register
                }
            ]
        },
       { 
           path: '/goodList', component: goodList
        },
    ]
})

var vm = new Vue({
    el: '#app',
    data: {},
    // 在webpack中如果要通过vue把组件渲染到页面中去，render函数可以实现
    render: function (createElement) {
        return createElement(app)
    },
    router//4、将路由对象挂载到实例对象上
})

// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；

 

 

webpack.config.js:

const path = require('path')

// 在内存中根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle
// 注入到页面底部，需要在导出的对象中，挂载一个plugin节点
var htmlWebpackPlugin = require('html-webpack-plugin')


// 引入vue-loader里面的plugin
const VueLoaderPlugin =require('vue-loader/lib/plugin');

// 当以命令形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有
// 提供要打包的文件的入口和出口文件，此时它会检查项目的根目录中的配置文件，并读取这个文件
// 就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js', 
    },
     // 所有webpack插件配置节点
    plugins: [
        new htmlWebpackPlugin({
            // 指定模板文件路径
            template: path.join(__dirname, './src/index.html'),
            // 设置生成的内存页面名称
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    //配置所有第三方loader模块
    module: {
        // 第三方模块的匹配规则
        rules: [
            // 处理css文件的loader
            {
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']
            },
            {
                test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']
            },
            {
                // 处理图片路径的loader,只有一个url-loader
                test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=5928&name=[hash:8]-[name].[ext]'
                // limit给定的值是图片的大小，单位是byte,如果图片的大小大于等于给定的limit值，
                // 就不会被转成base64格式的字符串，反之会
                // 要给每个图片取一个不同的名字，不然后者会覆盖前者
            },
            // 处理字体图标的loader
            {
                test: /\.(svg|eot|woff|woff2|ttf)$/, use: 'url-loader'
            },
            {
                // 配置babel来转换高级es6语法
                test: /\.js$/, use: 'babel-loader', exclude: /node_modules/,
            },
            { 
                test:/\.vue$/, use: 'vue-loader'
            }
        ]
    },
    // 设置vue被导入时包的路径
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="/bundle.js"></script> -->
</head>
<body>
    <div class="box">hhhhhh</div>
</body>
</html>