webpack4.0从零开始单页(多页)应用配置 (一)

3

理解webpack核心概念

借用官网的话:“webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。”

QQ五笔截图未命名.png-27.7kB

如图加上概述,开发的各种js模块,以及图片 + sass代码等 通过webpack编译之后生成单个js文件css文件等

webpack4.0迁移

如:

  • module.loaders 改为 module.rules
  • json-loader 不再需要手动添加
  • UglifyJsPlugin 压缩 loaders;

使用new webpack.LoaderOptionsPlugin()代替

new webpack.LoaderOptionsPlugin({
    minimize: true
})
  • ExtractTextWebpackPlugin 不再推荐使用,改为mini-css-extract-plugin

以及常用的CommonsChunkPluginoptimization.splitChunks代替
了解更多可以查看webpack官网指南,里面有迁移介绍,以及各个部分都有讲哪些被弃用

webpack组成部分

module.exports = {
    entry: {},  //入口起点,指示webpack应用使用哪个模块 支持String|Array|Object
    output: {}, //出口,告诉 webpack 在哪里输出它所创建的 bundles,以及命名文件default: './dist'
    module: {}, //loader插件,处理一些非javascript代码,转化为可用的代码
    plugins: [], //webpack相关插件
    resolve: {}, //用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用
    devServer: {},//通过node起一个本地服务器,webpack-dev-server完成一些代理,mock数据热加载等功能
    devtool: '',//此选项控制是否生成,以及如何生成 source map。主要用于开发和生产代码类型
    mode: '', //模式 
    optimization: {}//优化生成的文件,如合并commonsChunks等 
}

webpack基础功能配置

基础的已经弄懂之后,当然一行一行的配置才能有更加清晰的认知啦~

创建package.json

执行 npm init -y 或者 npm init -f 这两个会跳过提问阶段,直接生成新的package.json

微信截图_20190411111544.png-19.9kB

安装webpack和webpack-cli

npm i webpack webpack-cli --save-dev

微信截图_20190411112648.png-3.9kB
会发现根目录下多了node_modules文件夹,主要存放npm相关包的文件

修改package.json 和 webpack

在根目录下创建webpack.config.js并把之前写的webpack组成部分添加进去,
package.json添加

"dev": "webpack --mode development",
"build": "webpack --mode production"

或者将webpack.config.jsmode设置为"production"生产模式|"none"不区分|"development"开发环境

配置entry和output

如果在之前package.json里未设置 --mode 的话需要在配置里添加mode项并设置!
entry: 支持String, Object, Array 类型 String表示单个入口类型,Object表示多个入口,Array会将数组里的多个文件打包合并生成一个文件(如果filename未使用模板,输出的名称为数组的最后一个值的名称)!
output:entry相呼应entry的配置不一样,output可能稍有不同,例:如果entry配置的是多入口output.filename需要将名称设置为[name].js
这里使用多入口为例:

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },  
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }, 
    mode: 'none', //模式 
}

添加上述代码后执行npm run build会发现微信截图_20190411141328.png-7.9kBdist目录下会生成一个indexmain文件

如何引入css文件且进行编译

接下来在src目录下添加style.css文件:

body{
    background-color: red;    
}

且修改index.js文件:

import './style.css';
console.log('嘻嘻')

现在我们直接build文件,会发现令程序员最讨厌的红色字体来了~
微信截图_20190411143032.png-22.9kB

webpack的组成部分这节有讲 : module: {}, //loader插件,处理一些非javascript代码,转化为可用的代码

所以要想在js里引用css能生效,需要在module里配置loader;

安装css-loadernpm install --save-dev css-loader

修改webpack.config.js配置

const path = require('path');
module.exports = {
    entry: {
        index: './src/index',
        main: './src/main'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }, 
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    'css-loader'
                ]
            }
        ]
    }, 
    mode: 'none' 
}

安装成功配置后重新执行npm run build

微信截图_20190411145128.png-24.6kB

完全可以成功编译成功了嘛,是不是感觉也没有多复杂,手动emjio...
等等!!!

css的确实是编译成功了,但查看dist目录发现并没有css文件?查看index.js文件发现css代码在js文件里可以找到,如果是这样,我直接在html引入这个js文件会生效吗?引入之后发现并不可以,因为css-loader只是允许import或者require文件进来,并没有添加到dom之后,需要添加style-loader才能解决这个问题

安装style-loadernpm install --save-dev style-loader修改module的配置

rules: [
    {
        test: /\.css/,
        use: [
            'style-loader',
            'css-loader'
        ]
    }
]

再build之后引入,发现样式已经可以生效~但打包完后我们需要自己引入文件是不是很麻烦?webpack插件就是用来解决这些麻烦的,见下:

自动创建html

安装html-webpack-plugin: npm install --save-dev html-webpack-plugin
修改webpack.config.js配置如下:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: {
        ...同上
    },
    output: {
        ...同上
    }, 
    module: {
       ...同上
    }, 
    plugins: [
        new HtmlWebpackPlugin({
            title: 'hello word',
            template: './index.html',
            minify: {
                collapseWhitespace: true, //折叠空白区域
                removeComments: true, //删除注释
                hash: true, //是否需要对src引的文件后面加上Hash,使用时需要区分开发环境和生产环境
                chunks: [],//允许添加一些额外的文件
                chunksSortMode: 'manual' //chunks的文件顺序注入
            }
        })
    ],
    mode: 'none', 
}

执行npm run build会发现dist目录下会新增一个Index.html文件且自动引入了生成的文件

每次编码后不想手动更新?

此处我们使用HRM的方式,依赖于webpack-dev-server,devServer的配置项很多,这里只是使用了 其中很少的几项,更多配置可以查看官网部分,比如实现代理,mock数据等!

安装webpack-dev-server: npm install --save-dev webpack-dev-server

修改package.json中的dev:如下:
carbon (1).png-62.3kB

修改webpack.config.js文件配置添加devServer的配置:

devServer: {
    contentBase: path.join(__dirname, 'dist'),// 服务器资源的根目录,不写的话,默认为bundle.js
    hot: true, //启用热加载
    host: 'localhost',
    port: 8800,//端口号
    compress: true, // 服务器资源采用gzip压缩
}

执行npm run dev 发现本地已经起了一个server服务,页面上访问http://localhost:8800,与刚刚访问的页面效果相同!

配置devTool

修改webpack.config.js的devTool项

devtool: 'cheap-module-eval-source-map'
//原始源代码 (注意:此处'cheap-module-eval-source-map'
//只适用于开发环境,所以在使用的时候这里需要做一个区分,开发环境配置此项,生产可以配置为'none')

源码地址https://github.com/comeOutBing/log/tree/master/log/webpack_blog

到此一个简易的webpack配置已经完成了,当然很多地方还待优化,在后面会继续更新优化的地方~自己也简单总结了一张图
如有问题请指出微信截图_20190411172520.png-112.7kB

参考链接:

[https://github.com/jantimon/html-webpack-plugin#options][10]

你可能感兴趣的

载入中...