webpack入门

webpack入门

webpack简介

• 模块打包器；
• 项目构建工具；
• 自动化构建工具；
• 将多种类型资源之间的依赖关系构建成统一的静态资源，打包上线部署；

js css等，但不包括html，因为它认为html不算模块；

四个核心概念：

• 入口entry
• 输出output
• loader：webpack本身只能加载js json，其他的模块(资源)加载都需要相应的loader，可参考官网进行下载；
• 插件plugins：参考官网进行使用，如HtmlWebpackPlugin插件；

插件可以完成一些loader无法完成的工作；

webpack安装和基本使用

安装：

node install webpack --save-dev

使用：

webpack path/test.js dist/js/bundle.js

webpack命令 主模块文件 输出的静态资源（主模块有对其他模块的引用）；这里js文件打包，并没有用到loader；

json文件也不需要loader：JSON.stringify(jsondata);

配置文件（默认）

webpack.config.js，是一个node模块，返回一个json格式的配置信息对象；

创建这个文件：从官网把内容copy进来；

const path = require('path');//node内置用来设置路径的

modules.exports = {
    entry:'./scr/index.js',//当前项目主文件，即入口文件（注：使用时改成项目中对应的文件）
    output:{//出口 输出的配置（注：使用时改成项目中对应的文件）
        filename:'bundles.js',//输出文件名
        path:path.resolve(__dirname,'dist')//根目录 下的 dist目录/文件夹
    }
}

打包css和图片文件loader举例

更多loader

安装样式的loader

npm install css-loader style-loader --save-dev

npm install file-loader url-loader --save-dev

• css-loader：加载css文件；

• style-loader：加载样式文件；

• css文件也是一个模块，最终也需要在主文件/入口文件引入（只需要引入即可：import …/path/test.css）；

• url-loader是file-loader的扩展：

可以将小于8kb的文件，打包成base64的编码方式；避免图片的网络加载；

loader的使用示例

直接在官网上找，copy过来就行了；

modules.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,//正则匹配文件
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|jpg|gif)$/,//正则匹配文件
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192
                        }
                    }
                ]
            }
        ]
    }
}

再次打包：由于有了配置文件，只需执行webpack命令即可；

自动编译打包

webpack开发服务器工具：webpack-dev-server

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

现在就可以使用命令：webpack-dev-server;

modules.exports = {
    devServer:{
        contentBase:'dist/'//webpack-dev-server 默认服务于根目录下的index.html;contentBase可以重新引导webpack-dev-server 默认服务的路径，修正路径
    }
}

插件

更多插件

插件使用举例：

const path = require('path')

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')//自动生成html文件
const CleanWebpackPlugin = require('clean-webpack-plugin')//清除之前打包文件

modules.exports = {
    plugins:[
        new HtmlWebpackPlugin({template:'./index.html'}),//根据当前index.html为模板 生成新的dist目录下的index.html文件（如在dist目录下的index.html文件自动引入打包后的js文件）
        new CleanWebpackPlugin(['dist'])
    ]
}