webpack 入门

1. hello webpack

安装 webpack

npm i g webpack

写第一个 demo

 // 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'
 }
 }

执行

命令行中执行 webpack 就可以生成一个 bundle.js

tips

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-loader

配置 webpack

// 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 插件介绍

插件是弥补 loader

官方：https://webpack.js.org/config...

    // 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

？？？不是全局安装的怎么玩

webpack 入门

1. hello webpack

2. 多入口文件

3. CSS loader 加载器

4. webpack 插件介绍

5. webpack 构建本地服务器

繁忙的耗子

引用和评论

超星学习通/智慧树#刷题/网课#Online_Class助手#浏览器扩展_篡改猴_助手OCS

探索‘哋它亢’与迁移学习结合的技术前景

NumPy学习的第一天——ndarray对象