Webpack的基本使用

一、安装

npm install --save-dev webpack  //默认最新版本
npm install --save-dev webpack@<version>

如果使用 webpack 4+版本，还需要安装 CLI

npm install --save-dev webpack-cli

二、配置

创建webpack.config.js配置文件

//webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',    //入口文件
  output: {    //输出文件
    filename: 'bundle.js',     //打包后的文件
    path: path.resolve(__dirname, 'dist')    //存放位置
  }
}

创建完简单的配置文件，打开cmd进入项目文件路径，输入指令执行打包

> webpack  //默认选择使用 webpack.config.js
OR
> webpack --config webpack.base.js    //指定webpack.base.js 配置文件

Options 之 resolve

resolve: {
    extensions: ['.js','.vue','.json'],    //解决后缀
    alias: {
        'vue$': 'vue/dist/vue.esm.js',    //别名,用来解决runtime-compiler模式在浏览器的问题
        ...
    }
}

三、loader加载器

加载CSS

①安装 style-loader 、css-loader

npm install --save-dev style-loader css-loader

②配置webpack.config.js 的 module 使用style-loader 、css-loader

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

③使用
通过在项目中添加一个.css 文件，并将其导入到我们的入口文件index.js中

//index.js
import '.css文件路径'

加载图片

①安装 file-loader 、url-loader

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

②配置webpack.config.js 的 module 使用file-loader 、url-loader

module: {
     rules: [
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           {
              loader: 'file-loader'
           },
           {
              loader: 'url-loader',
              options: {
                limit: 8192 //当文件小于8192B会把图片转化为base64的格式
              }
           }
         ]
       },
...
     ]
}

③使用
通过在项目中的.css文件设置背景图片

//style.css
body{
    background: url('图片文件路径')
}

ES6转ES5

①安装 babel-loader、babel-core、babel-preset-es2015

npm install babel-loader babel-core babel-preset-es2015

②配置webpack.config.js 的 module 使用babel-loader、babel-core、babel-preset-es2015

module: {
     rules: [
       {
           test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
           use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
           }
       },
...
     ]
}

四、Plugins

html-webpack-plugin

安装

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

配置webpack.conifg.js文件options中的 plugins

//先导入模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
//再配置options
plugins: [
    new HtmlWebpackPlugin(),
    ...
]

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

uglifyjs-webpack-plugin

安装

npm i -D uglifyjs-webpack-plugin   //-D 即--save-dev

配置webpack.conifg.js文件options中的 plugins

//先导入模块
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//再配置options
plugins: [
    new UglifyJsPlugin(),
    ...
]

最后编辑于：2020.09.10 11:19:56