webpack-前端模块化工具

最新推荐文章于 2023-08-07 09:40:29 发布

shixue7758

最新推荐文章于 2023-08-07 09:40:29 发布

阅读量130

点赞数

分类专栏：前端面试vue题目 vue的webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/shixue7758/article/details/116209279

版权

前端面试vue题目同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue的webpack

1 篇文章 0 订阅

订阅专栏

文章预览：

1、作用

为什么要进行打包呢？是为了把css less 等不同的文件打包成一个js文件。自动进行模块化开发，并且会进行压缩，转换等附带的操作。之前使用的gulp/grunt强调打包流程的自动化，包括合并和压缩，模块化不是那么强。

2、使用步骤

1>、安装对应的webpack版本。在cmd命令符下查看node版本 node -v; 之后在cmd下全局安装webpack 执行**webpack@3.6.0 -g；因为在项目中执行wenpack打包命令的时候执行的是局部命令，所以需要局部安装一个webpack，做法是在VScode相应的目录下执行webpack@3.6.0 --save--dev**开发时依赖。npm init是初始化package.json文件。
2>、打包。在项目中建立src和dist文件夹，dist用于存放打包好的文件，src用于存放源文件。执行 **webpack src/index.js dist/bundle.js**会把index.js文件打包好放入dist的文件夹中。在index.html中就可以直接引入打包好的js文件了。
注意：为了避免每次打包的时候都写入口和出口参数，创建 webpack.config.js文件，这样的话每次打包就写 webpack 就可以了。

const path = require('path')
module.exports =  {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

为了避免每次都写那么长的代码，在package.json文件夹中引入以下代码，在执行webpack的时候可以用 **npm run build**代替

{
    "scripts": {
        "build": "webpack"
    }
}

3>、处理css文件
首先把css文件引入index.js require('./css/normal.css')；之后，下载css-loader和style-loader, npm install --save--dev css-loader和npm install --save--dev style-loader并且在webpack.config.js中配置rules

module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ {
            loader: 'style-loader'}
            , {
            loader: 'css-loader'} 
            ] //因为wabpack在读取loader的过程是从右往左的 先读取css实现文件加载，之后用样式渲染页面。
      },
}

之后webpack.config.js变成这个样子

const path = require('path')
module.exports =  {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            // css-loader只负责将css文件进行加载
            // style-loader负责将样式添加到DOM中
            // 使用多个loader时, 是从右向左
            use: [ {loader: 'style-loader'}, 
                    {loader: 'css-loader'} 
            ] //因为wabpack在读取loader的过程是从右往左的 先读取css实现文件加载，之后用样式渲染页面。
          },
        ]
    }
}

4>、处理less文件
首先把less文件引入index.js require('./css/special.less')；之后，下载less-loader, npm install --save--dev less-loader less并且在webpack.config.js中配置rules

 module: {
    rules: 
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
}

5>、处理图片文件
安装url-loader和file-loader npm install --save--dev url-loader/file-loader，前者用于处理小于8kb的图片，在编译图片过程中以代码显示，但是当图片大于8kb时，通过file-loader来加载, 此时在dist文件夹下生成了一个名字很长的图片，为了保证图片是被打包在dist下的，并且能保证原来的文件名，需要在webpack.config.js中配置以下代码

rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/, //给了三种图片格式
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 13000,
              //将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复 就是固定语法 原来叫什么名字现在就叫什么名字
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
]

同时在webpage.config.js的打包路径下做以下设置

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //将大于8kb的图片打包到dist中
    publicPath: 'dist/'
},

6>、ES6转换成ES5语法
安装babel npm install --save--dev babel-loader@7 babel-core babel-preset-es2015
配置webpack.config.js

{
        test: /\.js$/, //匹配js文件
        // exclude: 排除 不包含node_modules模块因为该模块不会打包
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader', 
          options: {
            presets: ['es2015'] //配置es2015版本
          }
        }
}

3、webpack配置vue

1>、安装vue和对应的加载解析包

npm install vue --save  npm install vue-loader vue-template-compiler --save--dev

2>、修改webpack.config.js的配置

module: {
        test: /\.vue$/,  //表示配置Vue内容
        use: ['vue-loader']
}
resolve: {
    // alias: 别名 extensions延伸
    extensions: ['.js', '.css', '.vue'], //解决js css Vue的后缀名字可以省略的
    //边运行边编译
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
}

3>、在src下创建vue文件夹，用于存放各个.vue组件。
在index.html中挂载vue实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

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

在main.js中引入vue模块

import Vue from 'vue' 
// import App from './vue/app'
import App from './vue/App.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App //在这里 vue的实例化对象相当于父组件，App组件相当于子组件，所以要在入口函数写明白
  }
})

在src的App主组件中创建组件并导出
template用于存放显示内容，script用于导入子组件导出该组件 style用于定义该组件样式。

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
// 使用组件
  import Cpn from './Cpn'
  
  // 注册组件
  export default {
    name: "App",
    components: {
      Cpn
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {

      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

src的子组件Cpn.vue

<template>
  <div>
    <h2>我是cpn组件的标题</h2>
    <p>我是cpn组件的内容, 哈哈哈</p>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Cpn",
    data() {
      return {
        name: 'CPN组件的name'
      }
    }
  }
</script>

<style scoped>

</style>

4、webpack的plugin

1>、使用步骤
先安装 npm xxx 之后再webpack.config.js中更改配置，如下

plugins: [
      //  BannerPlugin是版权插件，用来声明版权的 可以随意添加放在头部的webpack.config,js里边的内容 放在单引号里边
      new webpack.BannerPlugin('最终版权归aaa所有'),
      // 自动在dist中生成 index.html文件
      new HtmlWebpackPlugin({
        template: 'index.html' //表示是根据源代码 index,html来打包的 但要删除output中的publicPath: 'dist/' 防止路径出错
      }),
      new UglifyjsWebpackPlugin()
  ],

2>、BannerPlugin 版权插件
这是webpack自带的plugin所以直接导入更改webpack.config.js配置即可

plugins: [
      //  BannerPlugin是版权插件，用来声明版权的 可以随意添加放在头部的webpack.config,js里边的内容 放在单引号里边
      new webpack.BannerPlugin('最终版权归aaa所有'),
  ],

重新打包后在bundle.js头部出现 ‘最终版权归aaa所有’
3>、HtmlWebpackPlugin 打包html插件
作用：把index.html打包放入dist文件夹下。
安装：npm install html-webpack-plugin --save--dev
更改webpack.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
      // 自动在dist中生成 index.html文件
      new HtmlWebpackPlugin({
        template: 'index.html' //表示是根据源代码 index,html来打包的 但要删除output中的publicPath: 'dist/' 防止路径出错
      }),
  ],

同时删除之前在output中的publicPath设置，否则srcipt插入时会出现问题。
4>、uglifyis-webpack-plugin压缩js插件
作用：将buddle.js进行压缩
安装：npm install uglifyis-webpack-plugin@1.1.1 --save--dev 为了搭配使用CLI2版本
更改配置：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
lugins: [
      new UglifyjsWebpackPlugin()
],

5、搭建本地服务器

1>、安装

npm install webapck-dev-serve@2.9.1 --save--dev

2>、配置webpack.config.js

devServer: {  
    contentBase: './dist', //本地服务于哪一个文件夹
    inline: true  //是否实施刷新
}

3>、配置package.json

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

之后就可以用 npm run dev来运行

6、webpack的常见loader

image-loader：加载并且压缩图片文件
babel-loader：把ES6转换成ES5
css-loader：加载CSS并且压缩
style-loader：把css代码注入到js中，通过DOM元素去加载CSS.

shixue7758

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录