webpack使用

最新推荐文章于 2022-09-03 20:20:19 发布

超宝宝很乖

最新推荐文章于 2022-09-03 20:20:19 发布

阅读量129

点赞数

分类专栏：前端开发文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43311389/article/details/100110076

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本地安装webpack

$ npm i webpack -D

//------------------------------------------------------------------------------------------------------------------
1,配置webpack-dev-server
在package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  }

代表在控制台中执行npm run dev ，实际上相当于在powershell中执行的是webpack-dev-server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
  }

这里表示自动打包后，
打开浏览器,
在3000端口打开，
自动打开src目录下的index.html
并配置热更新（浏览器无刷新重载，ctrl+s自动打包后，浏览器更新）。
//-------------------------------------------------------------------------------------------------
webpack-dev-server配置的第二种方式
1,在package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  }

2 在webpack.config.js中配置webpack-dev-server的配置项

const webpack = require('webpack')
module.exports = {
    ...
    devServer: {
        //配置dev-server命令的第二种形式
        // --open --port 3000 --contentBase src --hot
        open: true,
        port: 3000,
        contentBase: 'src', //指定托管的根目录
        hot: true
    },
    plugins:[  //配置插件的节点
        new webpack.HotModuleReplacementPlugin()  //new一个热更新模块对象
    ]
}

//---------------------------------------------------------------------------------------------------
html-webpack-plugin
作用一：将index.html也放到内存中去（之前是只打包main.js）
作用二：将打包的bundle.js自动注入到内存中的index.html,不用再处理引用路径。
1装包

$ npm i html-webpack-plugin -D

2 在webpack.config.js中

//导入在内存中生成html页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ...
    plugins:[  //配置插件的节点
        new htmlWebpackPlugin({  //创建一个在内存中生成html的插件
            template: path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' //指定在内存中生成页面的名称
        })
    ]
}

3在内存中生成的index.html注入打包结果(自动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
      <!-- 当使用html-webpack-plugin后，我们不需要手动处理bundle.js的引用路径了，因为这个插件会在body的最后创建一个script
        标签，并且引用了正确的路径
    -->
    <!-- <script src="/bundle.js"></script> -->
  
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
        <li>这是第10个li</li>
    </ul>
       <!-- bundle.js will be reject here. -->
</body>
</html>

//-----------------------------------------------------------------------------------------------------------

style-loader css-loader
作用：默认webpack只打包js文件，这两个包使得css文件可以被打包，在js文件中使用
import ‘css path’ 成为可能。
1 装包

$  npm i style-loader css-loader -D

2 在webpack.config.js中新增配置节点module，在这个module对象身上，有一个rules属性，rules属性为一个数组，存放了所有第三方文件的匹配和处理规则。

module.exports = {
    ...
    module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
            {
                test:/\.css$/, //配置处理.css文件的第三方loader规则
                use:['style-loader','css-loader']
            }
        ]
    }
}

3 在js文件中使用import语法引入css

import './css/index.css'

打包生成即可。
补充：
在这里插入图片描述
//---------------------------------------------------------------------------------------------------------------------------
less-loader
作用：打包less

$ npm i  less less-loader -D

在webpack.config.js中

 module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
            {
                test:/\.css$/, //配置处理.css文件的第三方loader规则
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/, //配置处理.less文件的第三方loader规则
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }

使用

import './css/index.less'

//--------------------------------------------------------------------------------------------------------------
scss-loader
作用：打包scss文件。

$ npm i sass-loader -D

下载依赖项

$ cnpm i node-sass -D

webpack.config.js中

 module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
   			...
            {
                test:/\.scss$/, //配置处理.sass文件的第三c方loader规则
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }

注意 scss文件对应下载的包名字叫sass。
//------------------------------------------------------------------------------------------------------------
url-loader
作用：处理css文件中的引用路径。使其可以打包图片和字体资源等。

$ npm i url-loader file-loader -D

在webpack.config.js中

 module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
          ...
            {
                test:/\.(png|jpg|gif|bmp|jpeg)$/, //配置处理图片路径的loader
                use: 'url-loader?limit=1024*1024&name=[name].[ext]'
'
                //limit给定的值为图片的大小，单位为byte
                //当图片大小大于等于limit值时，不会转换为Base64编码，
                //小于limit则会转换为Base64编码。不加默认转换Base64。
                
                // &name=[name].[ext]  表示打包之后的图片名称和后缀名和打包前一致。但是不推荐，应该在项目根目录中唯一区分图片。
                //如果既想保留名称，又实现唯一区分，可在打包后的图片名称前加hash，推荐下面这种：
                //&name=[hash:8]-[name].[ext]
            }

        ]
    }

在css（less，scss）中使用图片路径

html,
body {
  .box {
    width: 120px;
    height: 120px;
    //    background-color: pink;
    //默认情况下，webpack无法处理CSS文件中的url地址，不管是图片还是字体库，只要是url地址，都处理不了
    background: url("../images/pic.jpg");
    background-size: cover;
  }
}

//--------------------------------------------------------------------------------------------------------------------------
url-loader加载bootstrap字体图标

$ npm i bootstrap3 -S

在main.js中进入

import 'bootstrap3/dist/css/bootstrap.css'

注：如果通过路径的方式去引入node_modules中的相关文件，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，后面加上详细的文件
不写node_modules,默认就会从当前目录向外一直找到node_modules
在webpack.config.js中

module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
          ...
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/, //配置处理字体文件的loader
                use: 'url-loader'
            }  

        ]
    }

在index.html中使用字体图标

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
    <span class="glyphicon glyphicon-music" aria-hidden="true"></span>
</body>
</html>

//-------------------------------------------------------------------------------------------------------------
babel-loader
在这里插入图片描述

1装包

$ npm i babel-core babel-loader babel-plugin-transform-runtime -D

$ npm i babel-preset-env babel-preset-stage-0 -D

2 在webpack.config.js中

 module:{ //这个节点用来配置所有第三方模块加载器
        rules:[  //所有第三方模块的匹配规则
           ...
            {
                test:/\.js$/, //配置babel来转换高级的js语法
                use: 'babe-loader',
                exclude: /node_modules/
            }  

        ]
    }

3 在项目根目录创建babel配置文件
在这里插入图片描述
在配置文件中写入：

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

在js文件中应用ES6语法

class Person {
    static info = {name:'zs',age: 18}
}

//class 是从后端语言（Java c#）中借鉴过来的，来实现面向对象
var p1 = new Person()

//直接访问静态属性
console.log(Person.info)

打包即可。
注：在最新版的babel-loader中，按照以上方法可能会报错，按照错误提示，卸载掉babel-loader，
重新安装babel-loader 7.x,再打包即可。

$ npm i babel-loader@7 -D

//-----------------------------------------------------------------------------------------------------------
在webpack中使用vue
第一步：装包

$ npm i vue -S

第二步：在main.js中导入vue包

import Vue from ‘vue’

第三步：在webpack.config.js中配置解析

module.exports = {
    ...
    resolve:{
        alias:{ //修改vue被导入时包的路径，解决vue默认导入runtime-only的问题。
            "vue$": "vue/dist/vue.js"
        }
    }
}

打包即可。
第三步如果不配置，可以使用import Vue from '…/node_modules/vue/dist/vue.js’的方式来使用。
在这里插入图片描述
//------------------------------------------------------------------------------------------
如果要在js中进入.vue文件使用，需要如下配置
1导入vue包

import Vue from ‘vue’

2 下载加载器

$ npm i vue-loader vue-template-compiler -D

3 在webpack.config.js中配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    ...
    plugins: [  //配置插件的节点
        new VueLoaderPlugin()
    ],
    module: { //这个节点用来配置所有第三方模块加载器
        ...
            {   test: /\.vue$/, //处理vue文件
                use: 'vue-loader' 
            }

        ]
    },
    resolve: {
        alias: { //修改vue被导入时包的路径，解决vue默认导入runtime-only的问题。
            "vue$": "vue/dist/vue.js"
        }
    }
}

完成以上三步配置，可在js页面中导入vue组件使用

import login from './login.vue'

//-------------------------------------------------------------------------------------------------------

vue-router的使用
第一步：
下载包：

$ npm i vue-router -S

第二步，在main.js中导入包：

//1导入vue-router包
import VueRouter from 'vue-router'

//2手动安装VueRouter
Vue.use(VueRouter)

第三步：
创建路由对象

/3创建路由对象
const router = new VueRouter({
    routes: [
        //account goodlist
        {
            path: '/account',
            component: account
        },
        {
            path: '/goodslist',
            component: goodslist
        },

    ]
})

第四步：
挂载路由

var vm = new Vue({
    el: '#app',
    render: c => c(app),  //render会把el指定的容器中所有的内容清空掉，所以不要把路由的router-link和router-view直接写到 
    //el所控制的元素中
    router  //4 挂载路由 
})

第五步（之后为上面的补充）：
在App.vue中

<template>
    <div>
        <h1>这是App组件</h1>
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="stylus" scoped>

</style>

第六步：
创建组件
GoodsList.vue

<template>
    <div>
        <h1>这是GoodsList组件</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="stylus">

</style>

Account组件

<template>
    <div>
        <h1>这是Account组件</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="stylus">

</style>

引入
在main.js中

//导入app组件
import app from './App.vue'
//导入Account组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

//-----------------------------------------------------------------------------------------------------------------

超宝宝很乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用

在package.json中"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server" }代表在控制台中执行npm run dev ，实际上相当于在powershell中执行的是webpack-dev-server...
复制链接

扫一扫

专栏目录