Webpack入门教程目标搭建webpack项目加载html文件加载css文件加载less文件独立css文件webpac

目标

搭建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.js

加载html文件

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

安装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 文件

加载css文件

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

安装 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 的内容

加载Less

利用 less-loader 加载less

安装 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 的内容

独立css文件

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

安装 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 会自动刷新页面

加载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 文件

<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