webpack新手入门配置

webpack学习

本文是针对webpack新手而言的，对于一些webpack初期会踩的一些坑的总结。

预备工作

npm i webpack -s 安装webpack
使用命令 webpack 源文件地址 处理文件存放路径和名称

兼容性问题

webpack 在4.0之后需要安装webpack-cli
“webpack”: “^4.41.5”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.10.1”

0.运行 npm init -y 命令,初始化包管理配置文件 package.json webpack.config.js 是webpack配置文件

module.exports={
    mode:'development'  //mode用来指定构建模式 
}
// 在package.json配置文件中的scripts 节点下,新增dev脚本
"scripts":{
    "dev":"webpack"  //script节点下脚本，可以通过npm run执行
}

1.如果要修改打包的入口和出口，可以在webpack.config.js中添加如下配置

const path=require('path') //导入nodejs中专门操作路径的模块
module.exports ={
    entry:path.join(_dirname,'./src/index.js'), //打包入口文件的路径
    output:{
        path:path.join(_dirname,'./dist'), //输出文件的路径
        filename:'bundle.js'   //输出文件的名称
    }
}

自动打包功能

0.运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具
1.修改package.json -> scripts 中的dev 命令如下

"scripts":{
    "dev":"webpack-dev-server" 
}

2.将src-> index.html中,script脚本的引用路径，修改为 “/bundle.js”
3.运行npm run dev 命令,进行重新打包
4.在浏览器中访问 http://localhost:8080 查看自动打包功能

预览页面 Html-webpack-plugin

0.运行 npm install html-webpack-plugin -D 命令,安装生成预览页面插件
1.修改webpack.config.js 文件头部区域，添加如下配置信息

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin =require('html-webpack-plugin')
const htmlPlugin =new HtmlWebpackPlugin({  //创建插件的实例对象
    template:path.join(__dirname,'./src/index.html')
    template:'./src/index.html', //指定要用到的模板文件
    filename:'index.html'   //指定生成的文件的名称，改文件存在于内存中，在目录中不显示
})

2.修改 webpack.config.js 文件中向外暴露的配置对象, 新增如下配置节点

module.exports ={
    plugin:[htmlPlugin]  //plugin数组是webpack打包期间会用到的一些插件列表
}

配置自动打包相关的参数

//package.json中配置
// --open 打包完成后自动打开浏览器页面
// --host 配置ip地址
// --port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

webpack中的加载器

通过loader打包非js模块
0.在实际开发中,webpack默认只能打包处理以_.js__后缀名的模块,其它非.js后缀名结尾的模块
webpack默认处理不了,需要调用loader加载器才能正常打包

loader加载器可以协助webpack打包处理特定的文件模块

• less-loader 可打包处理 .less 相关的文件

• sass-loader 可打包处理 .scss 相关的文件

• url-loader 可打包处理 css 中与 url 路径相关的文件

打包处理css文件

运行 npm i style-loader css-loader -D 命令,安装处理css文件的loader
在webpack.config.js 的 module ->rules 数组中, 添加loader规则

//所有第三方文件模板的匹配规则
module:{
    rules:[
        {test:/\.css$/ , use: ['style-loader' , 'css-loader']}
        // test 表示匹配的文件类型， use 表示对应要调用的loader
        // 注意:use 数组中指定的loader 顺序是固定的!!!  
        // 多个loader 的调用顺序是 从后往前调用
    ]
}

打包处理less文件

运行 npm i less-loader less -D 命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则

//所有第三方文件模板的匹配规则
module:{
    rules:[
        {test:/\.less$/ , use: ['style-loader' , 'css-loader' ,'less-loader']}
    ]
}

打包处理scss文件

运行 npm i sass-loader node-sass -D命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则

//所有第三方文件模板的匹配规则
module:{
    rules:[
        {test:/\.scss$/ , use: ['style-loader' , 'css-loader' ,'sass-loader']}
    ]
}

配置postCss 自动添加css 的兼容前缀 (解决各类浏览器兼容性问题)

运行 npm i postcss-loader autoprefixer -D命令
在项目根目录中创建 postcss 的配置文件 postcss.config.js ,并初始化如下配置

const autoprefixer =require('autoprefixer')   //导入自动添加兼容前缀插件
module.exports={
    plugins:[autoprefixer]  //挂载插件
}

在webpack.config.js 的module -> rules 数组中,修改css的loader

{test:/\.css$/ , use: ['style-loader' , 'css-loader' , 'postcss-loader']}

打包样式表中的图片和字体文件

运行 npm i url-loader file-loader -D 命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则

 rules:[
        {
            test :/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use :['url-loader?limit =16940']

            //其中 ? 之后的是 loader 的参数项
            // limit 用来指定图片的大 , 单位是字节(byte), 只有小于limit大小的图片，才会被转为base64图片
        }
    ]

打包处理js文件中的高级语法

安装babel-loader @7

安装babel 转化器相关的包, npm i bable-loader @babel/core @babel/runtime -D [ 或者安装 npm i babel-loader@7 babel-core babel-plugin-transform-runtime -D]
安装babel语法插件相关的包,npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D [或者安装 npm i babel-preset-env babel-preset-stage-0 -D]
在项目根目录中, 创建babel配置文件 babel.config.js 并初始化基本配置如下

module.exports={
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在根目录下创建 .babelrc 的配置文件 ,这个配置文件属于 JSON文件

//配置如下
{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

在webpack.config.js 的module ->rules 数组中, 添加loader规则

//exclude 为排除项 , 表示babel-loader 不需要处理 node_modules 中的js文件
{test:/\.js$/ ,use: 'babel-loader' ,exclude :/node_modules/}

Vue 单文件组件

传统组件的问题和解决方案

问题:

0.全局定义的组件必须保证组件的名称不重复
1.字符串模板缺乏语法高亮,在 Html 有多行的时候,需要用到 \ 转义
2.不支持 css 意味着当 html 和 javascript 组件化, css 明显被遗漏
3.没有构建步骤限制,只能使用 Html 和 ES5 ,而不能用预处理器 (babel)

解决方案

针对传统组件的问题,vue 提供了一个解决方案 —使用VUe 单文件组件

单文件的组件的构成

+ template 组件的模板区域
- script 业务逻辑区域
+ style 样式区域

webpack 中配置 vue 组件的加载器

运行 npm i vue-loader vue-template-compiler -D 命令
在 webpack.config.js 配置文件中, 添加 vue-loader的配置项

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports ={
    module:{
        rules:[
            { test :/\.vue$/ ,loader:'vue-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin()  //请确保引入这个插件
    ]
}

在 webpack 项目使用 Vue

运行 npm i vue -s 安装 vue
在 src ->index.js 入口文件中, 通过 import Vue from ‘vue’ 来导入 vue 构造函数
创建vue 的实例对象 ,并指定要控制的 el 区域
通过 render 函数 渲染 App 根组件

import Vue from 'vue'   //1.导入 vue 构造函数
import App from './components/App.vue'  //2.导入App根组件
const vm = new Vue({
    el:'',
    // render:function(createElements){return createElements(login)}
    //render:createElements=>createElements(login)
    render:h=>h(App) //通过 render 函数,把指定的组件渲染到 el 区域中 ,会把所有的内容清空覆盖
})

vue引用注意事项

在webpack中,使用import Vue from ‘vue’ , 导入的vue构造函数,功能不完不完整,

解决方法

//通过导入文件路径
import Vue from '../node_modules/vue/dist/vue.js'

//通过packjson.js文件中,main属性指定 vue.js 文件
"main":'vue.js'

//在webpack.config.js配置文件中添加 resolve 属性
 resolve:{
     alias:{
         'vue$':'vue/dist/vue.js'
     }
 }

vue文件查找规则

0.找项目根目录中有没有 node_modules 的文件夹
1.在node_modules 中根据包名,找到对应的 vue 文件夹
2.在 vue 文件夹中,找 package.json 的包配置文件
3.在package.json 文件中,查找 main 属性 [main属性指定了这个包在被加载时候的入口文件]

webpack 打包发布

上线之前需要通过 webpack将应用整体打包, 可以通过对package.json 文件配置打包命令
可在终端运行 npm run build 打包

//将命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts" :{
    //用于打包的命令
    "build" :"webpack -p",
    //用于开发调试的命令
    "dev" :"webpack-dev-server --open --host 127.0.0.1 --prot 8888"
}

Vue 脚手架的基本用法

vue 脚手架用于快速生成 vue 项目基础架构

安装3.x版本的 vue 脚手架
npm install -g @vue/cli

vue-cli 创建 vue 项目

//1.基于 交互式命令行的方式,创建新版 vue 项目
vue create my-project

//2.基于 图形化界面的方式
vue ui

//3.基于2.x的旧模板,创建旧版项目
npm i -g @vue/cli-init 
vue init webpack my-project

vue-router的使用方法

必须先导入 vue ,然后在导入 vue-router
import Vue from ‘vue’
import VueRouter from ‘vue-router’

必须通过 Vue.use() 明确的安装路由功能
vue.use(VueRouter)

//通过 render 函数,把指定的组件渲染到 el 区域中 ,会把所有的内容清空覆盖
//render:createElements=>createElements(login)

!!所以需要把所有的 router 放入在 render 属性暴露的组件之中

使用mint-ui组件

导入全部组件文件代码过大
//导入所有组件
import Vue from ‘vue’
import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
import App from ‘./App.vue’

Vue.use(MintUI)

new Vue({
el: '#app',
components: { App }
})

借助于babel-plugin-component,只引入需要的组件
npm i bael-plugin-component

然后将babel.config.js(.babelrc)配置文件 修改为

[
    "presets":[
        ["es2015",{"modules":false}]
    ],
    ""plugins:[["component",[
        {
            "libraryName":"mint-ui",
            "style":true
        }
    ]]]
]

使用MUI 代码片段

mui和bootstrap类似,不用用 npm 下载

使用moment.js 初始化时间

npm i moment -s

import  moment from 'moment'
Vue.filter('dataFormat',function(dataStr,pattern='YYYY-MM-DD HH:mm:ss'){
moment(dataStr).format(pattern)
})

bebel严格模式下的处理

babel严格模式下可能会造成路径的读取错误

解决方法:
npm install babel-plugin-transform-remove-strict-mode
在.bablerc文件中加入"plugins": ["transform-remove-strict-mode"]

使用vue-preview插件实现缩略图

网址 https://github.com/LS1231/vue-preview
npm i vue-preview -S

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//其中 img 里的class属性不能删除

<template>
    <img class='preview-img' v-for='(item,index) in list' :src='item.src' height='100' @click='$preview.open(index,list)'>
</template>
<script>
    export default{
        data(){
            return {
                list:[{
                    src:'http://placekitten.com/600/400',
                    w:600,
                    h400
                },{
                    src:'http://placekitten.com/600/400',
                    w:600,
                    h400
                }]
            }
        }
    }
</script>