webpack 使用教程

最新推荐文章于 2024-04-11 04:38:54 发布

四夕＿木又

最新推荐文章于 2024-04-11 04:38:54 发布

阅读量979

点赞数 24

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_54255895/article/details/136556540

版权

一、创建文件并初始化webpack

webpack下载后，为什么还要安装webpack-cli呢？因为webpack-cli是执行webpack的一个工具，已经从webpack4以后剥离，所以...

大部分vue开发者，在做vue项目的时候存在两种现状：

使用vue-cli创建vue项目
在别人搭建好的项目中开发

在磁盘或者文件cmd 运行以下命令

// 创建一个项目文件夹
mkdir webpack-demo && cd webpack-demo
// 初始化项目
npm init -y

这个时候，项目文件夹会多出一个package.json文件，可以用npm或者yarn安装webpack 和 webpack-cli；

npm i webpack webpack-cli -D

接下来创建一个src目录，src目录中创建一个main.js文件，在根目录创建一个webpack.config.js文件和public文件夹，在public文件夹中创建index.html

在根目录下添加.gitignore 文件，设置 node_modules 文件夹不上传

这个时候我们的项目结构就像这个样子：

我们给webpack.config.js写点内容：

const path = require('path')

module.exports = {
  mode: 'development', // 环境
  entry: path.resolve(__dirname, './src/main.js'), // 入口
  output: {
    path: path.resolve(__dirname, 'dist'), // 出口
    filename: 'js/[name].js'
  }
}

修改package.json的script属性

"scripts": {
 "build": "webpack --config ./webpack.config.js"
 }

这里为什么我要写--config呢？这个是我们在运行webpack的时候，可以指定按哪个webpack配置文件来运行，默认是运行webpack.config.js；所以这里可以直接写成 "build": "webpack"；

这个时候我们如果运行 npm run build，我们会发现在根目录下生成了一个dist文件夹，文件夹里有一个js/main.js 文件，我们下一步要做的是把这个js文件和根目录下的 index.html 关联起来，将 index.html 作为模板文件，把 js/main.js 动态编译进去；

安装 html-webpack-plugin 插件：

npm i html-webpack-plugin -D

webpack.config.js增加配置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'), // 模板地址
      filename: 'index.html', // 输出名
      title: '手动搭建的vue开发环境和webpack' // index.html 通过 <%= htmlWebpackPlugin.options.title %> 获取的变量值
    })
  ]
}

给main.js添加一些代码：

const app = document.getElementById('app')
app.textContent = 'Hello world!'

注意index.html的内容不然不显示以下效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

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

</html>

运行打包构建代码：

npm run build

来看一下dist文件夹中发生了什么变化

运行index.html 如下结果

打包成功不能用 vue

不要着急，接下来马上开始引入vue2；（这里我使用的vue2）

npm i vue@2 -S

main.js 引入

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

new Vue({
    el: '#app',
    render: h => h(App)
        // components: { App },
        // template: '<App/>'
})

src目录下创建App.vue

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

new Vue({
    el: '#app',
    render: h => h(App)
        // components: { App },
        // template: '<App/>'
})

接下来运行打包命令会报错，webpack默认不能处理vue文件，只能自己添加额外的插件进行处理

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

然后在webpack.config.js添加如下配置你会发现还是报错：

 module: {
        rules: [
            { test:/\.vue$/, loader: 'vue-loader' }   
        ]
    }

需如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader') // 这里添加vue-loader

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  module: { // 这里配置
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ]
  },
  plugins: [ //配置插件的节点，所有插件都要在这里配置
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
      title: '手动搭建的vue开发环境'
    }),
    new VueLoaderPlugin() // 这里配置
  ]
}

VueLoaderPlugin可以把你定义的其他规则应用到.vue文件里，比如/\.css$/ 或者 /\.js$/ 等规则，应用到vue文件中的<style> 或者 <script>里；

打包运行太麻烦了，需要直接运行更加直观安装 webpack-dev-server：

npm install webpack-dev-server -D

webpack.config.js增加：

devServer: {
    port: 3000, //端口设置
    hot: true //热更新
 }

修改package.json的 scripts 属性：

"scripts": {
    "build": "webpack --config ./webpack.config.js",
    "serve": "webpack serve --progress --config ./webpack.config.js"
  },

运行本地服务：

npm run serve

webpack 默认只会处理 js 文件，所以在处理其他文件时我们需要安装一些第三方的 loader 加载器

如果我们想要打包处理 css 文件，我们需要安装 style-loader 、 css-loader 这两个插件

npm i style-loader css-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'development', // 环境
    entry: path.resolve(__dirname, './src/main.js'), // 入口
    output: {
        path: path.resolve(__dirname, 'dist'), // 出口
        filename: 'js/[name].js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/, // 匹配以.css文件结尾的文件
                use: ['style-loader', 'css-loader'] // 指定要处理的.css文件的加载器
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'), // 模板地址
            filename: 'index.html', // 输出名
            title: '手动搭建的vue开发环境' // index.html 通过 <%= htmlWebpackPlugin.options.title %> 获取的变量值
        }),
        new VueLoaderPlugin()
    ],
    // resolve: {
    //     alias: {
    //         'vue$': 'vue/dist/vue.esm.js'
    //     }
    // },
    devServer: {
        port: 3000, //设置端口号
        hot: true, //热更新
    }
}

处理 less 文件

因为 less 编译过来其实也是一种 css 样式，所以我们需要向这样使用 use:['style-loader','css-loader','less-loader']

npm i less -D
npm i less-loader -D

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

处理 scss 文件

同上，用scss 就配置scss

npm i sass -D
npm i sass-loader -D

{
  est: /\.scss$/,
  use: ['style-loader','css-loader','sass-loader']
}

处理 css 文件中的 url 地址

在默认情况下， webpack 是无法处理 css 文件中的 url 地址，不管是图片还是字体库，只要是 url 地址，就处理不了

因此我们需要 url-loader、 file-loader ，因为 url-loader 依赖 file-loader

{
  test: /\.(jpg|png|gif|bmg|jpeg)$/,
  use: 'url-loader?limit=7631&name=[name].[ext]'
},
{
  test: /\.(ttf|eot|svg|woff|woff2)$/,
  use: 'url-loader'
}

url-loader 默认会将图片设置为 base64 进行传递，如果不想设置为 base64 就需要我们将 use:'url-loader' 设置为 use:'url-loader?limit=7631&name=[name].[ext]'

在 url-loader 设置参数，就像我们浏览器中的url地址一样
我们使用 limit 进行设置， limit 后面的值必须设置成小于图片的大小（单位是：字节 byte），这样图片就会以 url 的形式进行传输，否则图片就会被转为 base64格式的字符串进行传值
而后面的 name 参数是对客户端浏览器中的文件名进行设置，会将浏览器中图片文件名设置成路径中一样的文件名，因为经过上面的步骤只会将图片的路径设置成hash值

处理 ES6 的高级语法

在 webpack 中，默认只能处理一部分 ES6 的语法，一些更高级的 ES6 语法语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader ，来帮助 webpack 处理这些高级的语法，而第三方的 loader 把高级语法转为低级语法之后，会把结果交给 webpack 去打包到我们要打包的文件中

而我们通过 Babel，可以帮我们将高级的语法转换为低级的语法

在 webpack 中，必须装两套包，才能实现将高级语法转为为低级语法的功能

第一套

babel-core 、 babel-loader 、 babel-plugin-transform-runtime

第二套

babel-preset-env 、 babel-preset-stage-0

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

{
   test: /\.js$/,
   use: 'babel-loader',
   exclude: /node_modules/ //这是配置 Babel 来转换 ES 的语法
}

四夕＿木又

关注

24
点赞
踩
25

收藏

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

一、创建文件并初始化webpackwebpack下载后，为什么还要安装webpack-cli呢？因为webpack-cli是执行webpack的一个工具，已经从webpack4以后剥离，所以...在磁盘或者文件cmd 运行以下命令这个时候，项目文件夹会多出一个package.json文件，可以用npm或者yarn安装webpack 和 webpack-cli；
复制链接

扫一扫