webpack基础

一，新建项目

新建一个空文件夹，如my-webpack,使用vscode打开该文件夹，执行npm init -y自动创建package.json文件。 在终端中执行npm install webpack webpack-cli -D，安装webpack和webpack-cli。

二，Entry

entry用来指定webpack的打包入口。

1,单入口文件写法

module.exports = {
    entry:'./src/index.js'
}

2,多入口写法

module.exports = {
    entry:{
        app:'./src/index.js',
        search:'./src/search.js'
    }
}

三，Output

output用来告诉webpack将打包编译后的文件输出到哪里。 需要引入path模块。

const path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}

四，Mode

mode用来指定当前的构建环境：development,production,none;同时会设置process.env.Node_env的值。

五，解析ES6

使用babel-loader编译ES6语法: npm install babel-loader @babel/core -D。 同时在webpack配置文件中增加：

module:{
    rules:[
        {
            test:/\.js$/,
            use:'babel-loader'
        }
    ]
}

babel的配置文件是.babelrc文件:增加ES6的babel preset配置,安装插件：npm install @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-propertieS -D

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"//解析react语法
    ],
    "plugins":[
        "@babel/proposal-class-properties"//解析class语法
    ]
}

六，解析css

css-loader用于加载.css文件；style-loader将样式通过<style>标签插入到head中。

先安装css-loader和style-loader: npm install css-loader style-loader -D

在webpack中添加配置：

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

七，解析less

解析less文件需要安装less-loader:npm install less less-loader -D

在webpack中添加配置：

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

八，解析图片资源

解析图片资源需要使用url-loader:npm install url-loader -D

在webpack中添加配置：

mofule:{
    rules:[
        {
            test:/\.(png|jpg|svg|gif|jpeg)$/,
            use:[{
                loader:'url-loader',
                options:{
                    //图片大小小于1M转化为base64
                    limit:10240
                }
            }]
        }
    ]
}

九，解析字体资源

解析字体资源需要使用file-loader: npm install file-loader -D

在webpack中添加配置：

module:{
    rules:[
        {
            test:/\.(woff|woff2|eot|ttf|otf)$/,
            use:'file-loader'
        }
    ]
}

十，热更新

使用webpack-dev-server插件实现开发过程中的代码热更新。WDS不刷新浏览器，不输出文件，而是放在内存中，需要配合使用webpack内置的HotModuleReplacementPlugin插件。

首先安装插件：npm install webpack-dev-server -D;

然后在webpack中添加配置：

const webpack = require('webpack');
module.exports = {
    ...
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:'dist',
        hot:true,
        inline:true,
        port:8888
    }
}

最后需要在package.json文件的scripts中增加一条命令:"dev":"webpack-dev-server --open"

十一，html-webpack-plugin

html-webpack-plugin的作用：1，根据指定的页面在内存中生成 指定的页面；2，自动 将生成的xxx.js文件引用到页面中去。首先安装插件：npm install html-webpack-plugin -D。 然后修改webpack配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src/index.html'),
            filename:'index.html'
        })
    ]
}

至此在终端运行：npm run dev就可以在浏览器中打开我们的页面，在代码中修改可以实现实时更新。