Webpack入门教程

时间 2019-12-04

标签 webpack 入门教程繁體版

原文原文链接

目标

搭建webpack项目
加载html文件
加载css文件
加载less文件
独立css文件
webpack热更新
加载vue

搭建webpack项目

安装webpack

# 初始化npm
npm init -y
# install webpack
yarn add -D webpack webpack-cli
复制代码

项目结构搭建

webpack.config.js

module.exports = {
  mode: 'production',
  entry: './src/index.js'
}
复制代码

src/index.js

console.log('Hello Webpack')
复制代码

配置package.json文件

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}
复制代码

编译webpack

yarn build
复制代码

在当前目录下生成 dist/main.js 文件，即为编译后的index.jsjavascript

加载html文件

利用 html-webpack-plugin 加载html文件css

安装html-webpack-plugin

yarn add -D html-webpack-plugin
复制代码

配置webpack.config.js

const HtmlWepackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  plugins: [
        new HtmlWepackPlugin({
            template: './src/index.html'
        })
  ]
}
复制代码

在 src 目录下建立 index.html
编译webpack

在当前目录下生成 dist/index.html 文件html

加载css文件

利用 style-loader css-loader 加载css文件vue

安装 style-loader 、 css-loader

yarn add -D style-loader css-loader
复制代码

配置 webpack.config.js

const HtmlWepackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
  },
  plugins: [
        new HtmlWepackPlugin({
            template: './src/index.html'
        })
  ]
}
复制代码

在 src 目录下建立 global.css
在 src/index.js 引入 global.css

import './global.css'
console.log('Hello World')
复制代码

编译webpack

编译完成后， dist/index.html 中会引入 global.css 的内容java

加载Less

利用 less-loader 加载lesswebpack

安装 less-loader less

yarn add -D less-loader less
复制代码

配置 webpack.config.js

const HtmlWepackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }, {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWepackPlugin({
            template: './src/index.html'
        })
    ]
}
复制代码

建立 index.less

.content {
    p {
        color: aquamarine;
    }
}
复制代码

在 src/index.js 中引入 index.less

import './index.less'
复制代码

编译webpack

编译完成后， dist/index.html 中会引入 index.less 的内容web

独立css文件

利用 mini-css-extract-plugin 进行css文件的独立，避免将css打包进js文件中shell

安装 mini-css-extract-plugin

yarn add -D mini-css-extract-plugin
复制代码

配置 webpack.config.js

const HtmlWepackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { 
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development'
                        }
                    },
                    { loader: 'css-loader' }
                ]
            }, {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new HtmlWepackPlugin({
            template: './src/index.html'
        })
    ]
}
复制代码

编译webpack 编译完成以后会生成 dist/main.css 文件

webpack热更新

安装 webpack-dev-server
配置 package.json 添加dev脚本

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.7.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1"
  }
}
复制代码

运行脚本

yarn dev
复制代码

此时会打印 Project is running at http://localhost:8081/ 访问http://localhost:8081/ 会显示index.html的内容，当咱们进行修改后，无需从新编译， webpack-dev-server 会自动刷新页面npm

加载vue

安装 vue-loader 、 vue-template-compiler 、 vue

yarn add -D vue-loader vue-template-compiler 
yarn add -D vue
复制代码

配置 webpack.config.js

const HtmlWepackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    { 
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development'
                        }
                    },
                    { loader: 'css-loader' }
                ]
            }, {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(), // 这个插件是必须的，它的职责是将定义过的其余规则复制并应用到.vue文件里相应语音的块
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new HtmlWepackPlugin({
            template: './src/index.html'
        })
    ]
}
复制代码

建立vue文件

在 src 目录下建立 App.vue 文件json

<template>
  <div>
    <h1>Hello Vue</h1>
  </div>
</template>
复制代码

引用vue文件

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

new Vue({
    el: '#app',
    render: (h) => h(App)
})
复制代码

修改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>Webpack Demos</title>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>
复制代码

编译webpack