webpack 入門

時間 2019-11-09

標籤 webpack 入門简体版

原文原文鏈接

1. hello webpack

安裝 webpackjavascript

npm i g webpackcss

寫第一個 demohtml

// 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>Document</title>
 </head>
 <body>
 // bundle.js 是 webpack 打包出來的的文件
 <script src="./bundle.js" type="text/javascript"></script>
 </body>
 </html>

 // main.js  將要被打包的入口文件
 document.write("<h1>hello world</h1>")

 // webpack.config.js    webpack 配置文件
 module.exports = {
 entry: "./main.js",         // 入口文件
 output: {                   // 輸出文件
     filename: 'bundle.js'
 }
 }

執行java

命令行中執行 webpack 就能夠生成一個 bundle.js

tipswebpack

live-server 能夠跑起一個熱加載服務

2. 多入口文件

// webpack.config.js
module.exports = {
    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'   // name 的值來自 entry 裏面的 key
    }
}

3. CSS loader 加載器

安裝 loader
npm i -D xxx-loaderweb

配置 webpacknpm

// webpack.config.js
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

// main.js
require('./app.css')
document.write('<h1>hello css-loader</h1>')

// app.css
body {
    background-color: red
}

運行
$ npm init -y
$ npm i -D css-loader style-loader
$ webpack
$ live-server服務器

4. webpack 插件介紹

插件是彌補 loaderapp

官方：https://webpack.js.org/config...webpack-dev-server

// webpack.config.js
    var webpack = require('webpack')
    module.exports = {
        entry: __dirname + '/main.js',  // 絕對地址
        output: {
            path: __dirname + '/',
            filename: 'bundle.js'
        },
        plugins: [
            // 配置一個壓縮代碼的插件
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: false,
                }
            })
        ]
    }

5. webpack 構建本地服務器

利用自帶的 webpack-dev-server 構建

安裝依賴
npm i -g webpack-dev-server

配置

// webpack.config.js
var webpack = require('webpack')
module.exports = {
    entry: __dirname + '/main.js',  // 絕對地址
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'
    },
    plugins: [
        // https://webpack.js.org/configuration/plugins/#plugins
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: false,
            }
        })
    ],
    devServer: {
        contentBase: './',  // 本地服務的根目錄
        color: true,
        historyApiFallback: true,   // 全部跳轉指向 index.html
        inline: true,   // 實時刷新
        port: '3333'
    }
}

運行
webpack-dev-server --open

？？？不是全局安裝的怎麼玩

1. 【 webpack 】- 2 webpack入門
2. webpack入門
3. webpack入門（2）
4. 入門Webpack
5. Webpack入門
6. webpack入門（1）
7. webpack 入門一
8. webpack 入門
9. Webpack入門（三）
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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