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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。