webpack学习笔记

最新推荐文章于 2024-11-09 00:03:49 发布

MonsterK666

最新推荐文章于 2024-11-09 00:03:49 发布

阅读量80

点赞数

分类专栏：学习笔记文章标签： webpack

本文链接：https://blog.csdn.net/monsterk666/article/details/115248153

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Node环境中配置Webpack，从全局和局部安装、npm script的使用，到打包流程、loader的应用、配置文件详解、plugin的运用和webpack-dev-server的实战。重点涵盖了关键步骤和常见问题解决方法。

摘要由CSDN通过智能技术生成

webpack学习笔记

webpack需在node环境中运行

在命令行中使用node -v查看是否安装node

//node环境初始化
//进入对应目录的终端
npm init
//pack name不能有中文
//其余步骤可直接回车

//可使用 npm init -y默认安装命令


npm install	//安装项目依赖

--save-dev	//开发环境	打包上线后将不再需要
--save		//生产环境	打包上线后依旧需要

1、webpack安装

全局安装webpack

npm install webpack@3.6.0 -g

局部安装（一般指定特定版本

若没有进行局部安装，则会使用全局webpack进行打包，若全局版本和需求版本不一致可能出错

cd  对应目录
npm install webpack@3.6.0 --save-dev
//--save-dev是开发时依赖，项目打包后不需要继续使用的

补充：入口文件名称一般为main/index.js

dist文件夹中存放已打包文件

2、打包文件

//终端进入项目目录
//使用webpack  打包目标文件地址  打包完成目标存放地址
webpack .\src\main.js .\dist\bundle.js

打包完成后，在html页面中使用script引入已打包文件

<script src="./dist/bundle.js"></script>

注意：在文件内容进行修改后，需重新进行打包才会执行

3、webpack配置

3.1、webpack.config.js

在项目文件夹中新建webpack.config.js 配置文件进行配置

const path =require('path')

module.exports={
    entry:'./src/main.js',   //入口文件
    output:{                //出口文件
    //  path:path.resolve(node中定义的全局变量（不可自定义）,'绝对路径名'),          自动获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'                //出口文件名称
    }   
}

3.2、使用本地webpack包进行打包

在终端直接执行webpack命令，使用的时全局安装的webpack

当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack

 //package.json中定义了webpack后可直接使用npm命令进行打包
 
//package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    //  推荐使用以下两种
    //"dev": "webpack --mode development",   开发模式
    //"build": "webpack --mode production"   生产模式
      
  },

//运行打包
npm run build

//执行npm run 事件名，会执行package.json中script对象中对应事件名的事件

4、loader

用于打包css、es6等

官方loader文档https://webpack.docschina.org/loaders/

//进入终端执行npm install --save-dev 需要的loader名
npm install --save-dev css-loader

//在webpack.config.js中的module中添加
const path =require('path')

module.exports={
    entry:'./src/main.js',   //入口文件
    output:{                //出口文件
    //  path:path.resolve(node中定义的全局变量（不可自定义）,'绝对路径名'),          自动获取路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'                //出口文件名称
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            // css-loader只负责css文件的加载，不会进行解析
            // style-loader进行css解析
            // 使用多个loader时，webpack是从右向左解析的
            use: ["style-loader", "css-loader"],
          },
            
            
          //打包less时
           {
            test: /\.less$/i,
            use:[{
                loader: "style-loader", //进行css解析
            },
            {
                loader: "css-loader",  //css文件的加载
            },
            {
                loader: "less-loader", // 将 Less 文件编译为 CSS 文件
            }]
          },
        ],
      },   
}

4.1、css打包

npm install --save-dev css-loader

{
    test: /\.css$/i,
        // css-loader只负责css文件的加载，不会进行解析
        // style-loader进行css解析
        // 使用多个loader时，webpack是从右向左解析的
        use: ["style-loader", "css-loader"],
},

4.2、less打包

npm install --save-dev css-loader
npm install less less-loader --save-dev

{
    test: /\.less$/i,
    use:[{
        loader: "style-loader", //进行css解析
    },
    {
        loader: "css-loader",  //css文件的加载
    },
    {
        loader: "less-loader", // 将 Less 文件编译为 CSS 文件
    }]
},

4.3、文件图片打包

npm install url-loader --save-dev
npm install file-loader --save-dev


{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            // 当加载的文件小于限制时，会转化为base64格式
            // 为了加载大于limit值的文件，需使用file-loader
            limit: 8192,//文件大小   为限制kb * 1024

            //   自定义打包文件名称
            // 如果不加[]则会直接打包成配置的名字
            // 如： name:'img/name.[ext]'
            // 变成：  name.png，name.jpg
            // name:'dist下存放路径名 / [添加图片原有名字].[截取8位hash值]].[动态添加后缀]'
            name:'img/[name].[hash:8].[ext]'
        },
   ],
},

4.4、es6转es5打包

//					    转化的loader  core:"核心"  转化es6位es5
npm install -D babel-loader @babel/core @babel/preset-env


{
    test: /\.m?js$/,
        // exclude:排除
        // include：包含
        exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
            }
}

4.5、Vue

npm install vue --save


//在入口mian.js中引入Vue
import Vue from 'vue'

new Vue({
    el:'#app',
    data:{
        msg:'hello world'
    }
})

//在webpack配置文件中配置别名，选择引用的vue版本，避免报错
module.exports={
    entry:'./src/main.js',
    ......
    resolve:{
      // alias:别名
      // 将引用的vue版本指向compiler版本
      // vue的两个版本
      // 1、runtime：不能出现任何template
      // 2、compiler：可以出现template 
      alias:{
        'vue$':'vue/dist/vue.esm.js'
      }
    } 
}

//注：在js文件中使用以下命令在node_modules中导入任意需要的模块

import Vue from '地址'
//若没有写地址直接写vue，则会在node_modules中进行查找引入

//导入vue
import Vue from 'vue'

4.5.1、规范vue格式

//减少html代码变更，保持html代码整洁
//在vue实例中使用template
//template的内容会替换el中内容

<div id="app"></div>


new Vue({
    el:'#app',
    template:`
    <div>
        <button @click="mybtn">按钮</button>
        <p>{{msg}}</p>
        <p>webpack</p>
    </div>
    `,
    data:{
        msg:'hello world'
    },
    methods:{
        mybtn(){
            alert('yeah!')
        }
    }
})

4.5.2、利用组件化思想优化代码

let myapp={
    template:`
        <div>
            <button @click="mybtn">按钮</button>
            <p>{{msg}}</p>
            <p>webpack</p>
        </div>
    `,
    data() {
        return {
            msg:'hello world'
        }
    },
    methods:{
        mybtn(){
            alert('yeah!')
        }
    }
}

new Vue({
    el:'#app',
    template:`<myapp></myapp>`,
    components:{
        'myapp':myapp
    }
})

4.5.3、简化入口文件main.js

//新建一个js文件，写入template代码
export default={
    template:`
        <div>
            <button @click="mybtn">按钮</button>
            <p>{{msg}}</p>
            <p>webpack</p>
        </div>
    `,
    data() {
        return {
            msg:'hello world'
        }
    },
    methods:{
        mybtn(){
            alert('yeah!')
        }
    }
}

//在main.js中使用import进行引入
import myapp from './vue/app'

new Vue({
    el:'#app',
    template:`<myapp></myapp>`,
    components:{
        'myapp':myapp
    }
})

4.5.4、使用vue文件进一步优化

.vue文件首字母大写

//安装vue的loader
npm install -D vue-loader vue-template-compiler

//webpack配置loader
// webpack.config.js
const path =require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry:'./src/main.js',   //入口文件
  ......
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

//main.js
import myapp from './vue/App.vue'

new Vue({
    el:'#app',
    template:`<myapp></myapp>`,
    components:{
        'myapp':myapp
    }
})

//App.vue
<template>
    <div>
        <button @click="mybtn">按钮</button>
        <p>{{msg}}</p>
        <p class="ppp">webpack</p>
        <mycpn></mycpn>
    </div>
</template>

<script>
// 引入子组件
import mycpn from './Cpn'

export default {
    name:'myapp',
    data() {
        return {
            msg:'hello world'
        }
    },
    methods:{
        mybtn(){
            alert('yeah!')
        }
    },
    // 注册子组件
    components:{
        'mycpn':mycpn
    }
}
</script>

<style scoped>
.ppp{
    color: #fff;
}
</style>

5、plugin

5.1、使用plugin添加版权信息

//webpack配置文件中
const webpack = require('webpack')


plugins: [

// 给打包结果添加版权信息
new webpack.BannerPlugin('最终版权归abcde所有')
]

5.2、将html打包至dist文件夹

npm install html-webpack-plugin --save-dev

//在webpak配置文件中
const HtmlWebpackPlugin = require('html-webpack-plugin')

......

plugins: [
    .....
    new HtmlWebpackPlugin({
        //指定以某个页面为模板进行打包
        //作用：将index.html打包至dist文件夹
        template:'index.html'
    })
]

5.3、压缩js

//指定1.1.1版本，和Cli2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev


//在webpak配置文件中
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

......

plugins: [
    .....
    
    //压缩js能极大的减少js文件大小，但是所有注释和版权信息将会丢失
    new UglifyjsWebpackPlugin()
]

6、webpack-dev-server

作用是让浏览器自动刷新修改后的代码

//学习过程中调试未生效，暂时未找到适配版本

//2.9.3和webpack3.6.0适配
npm install --save-dev webpack-dev-server@2.9.3
//webpack配置文件
devServer:{
    contentBase:'./dist',   //为哪个文件夹提供本地服务，默认是根文件夹
    inline:true,            //页面是否实时刷新
    // port:                //端口号，默认为8080端口
    // historyApiFallback   // 在SPA页面中，依赖html5的history模式 
}
    
//package.json的script中
"dev":"webpack-dev-server"
 
//添加--open，使其在编译好后自动打开浏览器
"dev":"webpack-dev-server --open"
    
//运行
npm run dev



//最后打包的时候依旧需要执行npm run build