webPack配置教程(一步步操作)

一:   

成都创新互联专注于临沂企业网站建设,成都响应式网站建设公司,电子商务商城网站建设。临沂网站建设公司,为临沂等地区提供建站服务。全流程定制开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

      新建一个文件,例如:webpack-demo

        1.命令行:cd webpack-demo, 

           npm init (一直回车，知道输入yes); 目录中出现package.json.

        2.安装webpack     

            npm i -D webpack

           教程中使用的是最新版本.

        package.json出现webpack，说明安装成功了。node_modules中也出现了webpack文件夹

       3.在根目录创建一个webpack.config.js文件

               创建完成后,打开package.json

                    在scripts对象中添加一条命令                    "名字"："执行命令"     执行命令---相当于在命名行输入......

        4 .在根目录创建dist和src文件夹, 在src目录下创建app.js文件夹

                在app.js文件中输入

                        console.log("Hello Webpack");

                -dist

                -src

                在webpack.config.js添加如下代码

                                                            //当前路径

                                                            const path = require('path');

                                                            module.exports = {

                                                            //选择的模式告诉webpack使用其内置的优化

                                                            // "production" | "development" | "none"

                                                            mode : "development",

                                                            //入口文件

                                                            entry: "./src/app.js",

                                                            //webpakc如何输出的目标路径

                                                            output: {

                                                             // 所有输出文件的目标路径

                                                                // 必须是绝对路径（使用 Node.js 的 path 模块）

                                                            path : path.resolve(__dirname,"dist"),

                                                            //输出文件的名字

                                                            filename : 'bundle.js',

                                                            },

                                                            }

        在命令行执行 npm run start

           webpack4.0后需要安装webpack-cli.

            选择yes。安装webpack-cli

    在执行命令

           打包成功。

        在dist文件目录下出现了bundle.js文件.

            在dist文件夹下创建index.html,引入bundle.js  浏览器打开index.html。打开控制台，出现了Hello Webpack。  

        你肯定不想每个项目都有去自己创建html，是不是在想有什么 插件可以把这个操作帮我自动生成。

                有的:https://github.com/jantimon/html-webpack-plugin  

           这个插件时帮助我们简化html文件的创建。详细信息可以点上面链接进去浏览。

            所以我们下一步来使用这个插件.

            安装: npm i -D   html-webpack-plugin

            webpack有一个plugins属性:  专门用了引入插件的。plugins :[]

            在webpack.config.js中  添加如下代码

                                        //当前路径

                                        const path = require('path');

                                        //简化了HTML文件的创建

                                       ++ const htmlWebpackPlugin= require('html-webpack-plugin');

                                        module.exports = {

                                        //选择的模式告诉webpack使用其内置的优化

                                        // "production" | "development" | "none"

                                        mode : "development",

                                        //入口文件

                                        entry: "./src/app.js",

                                        //webpakc如何输出的目标路径

                                        output: {

                                         // 所有输出文件的目标路径

                                            // 必须是绝对路径（使用 Node.js 的 path 模块）

                                        path : path.resolve(__dirname,"dist"),

                                        //输出文件的名字

                                        filename : 'bundle.js',

                                        },

                                        //插件

                                        ++plugins: [

                                            new htmlWebpackPlugin()

                                        ]

                                        }

    删除dist文件夹中的文件 ,再次执行: npm run start

        在dist文件夹中出现了index.html和bundle.js 

         发现html文件创建好并且帮我们引入了bundle.js。 是不是很开心。不会手动创建html，引入js了。 不慌，还有一个问题,我想在html加入一些东西

            比如    :

            这种该怎么做了？ 

        html-webpack-plugin有一个属性

            template解决了这个问题.

   在webpack.config.js中  添加如下代码

                new htmlWebpackPlugin({

                                //html文件路径

                ++   template : './src/index.html',

                    })

        再次执行npm run start

                       发现html跟你写的模版文件一样，但多了一个引入js的代码.

二:      模块规则（后面我们会使用到react的一些语法）

            安装

                npm i -D    react    react-dom

            改写app.js

                                import React,{Component} from "react";

                                import reactDom  from  "react-dom";

                                class  App extends Component{

                                render(){

                                return (

                                )

                                }

                                }

                                reactDom.render(

                                ,

                                document.getElementById("root")

)

    执行npm run start,发现报错了。

提示我么需要用合适的loader来解析，因为webpack不认识js中的react代码，所有我们得需要使用一个合适的loader来让webpack认识react代码.

安装：

babel-loader  : https://github.com/babel/babel-loader  

    npm i - D babel-loader

 还需安装:

  npmi  i -D  babel-preset-react

打开webpack.config.js

            添加如下代码：

                    //当前路径

                    const path = require('path');

                    //简化了HTML文件的创建

                    const htmlWebpackPlugin= require('html-webpack-plugin');

                    module.exports = {

                    //选择的模式告诉webpack使用其内置的优化

                    // "production" | "development" | "none"

                    mode : "development",

                    //入口文件

                    entry: "./src/app.js",

                    //webpakc如何输出的目标路径

                    output: {

                     // 所有输出文件的目标路径

                        // 必须是绝对路径（使用 Node.js 的 path 模块）

                    path : path.resolve(__dirname,"dist"),

                    //输出文件的名字

                    filename : 'bundle.js',

                    },

                    //模块配置

                   ++ module:{

                    //模块规则(配置 loader、解析器等选项)

                    rules:[

                    {

                    //匹配规则

                    test :/\.js$/,

                    use  : {

                    //需要的加载器

                    loader : "babel-loader",

                    //loader 的可选项

                    options :{

                    //预先设置，参考babel的预先设置

                    presets : ['react']

                    }

                    }

                    }

                    ]

                    },

                    //插件

                    plugins: [

                        new htmlWebpackPlugin({

                        //html文件路径

                        template : './src/index.html',

                        })

                    ]

                    }

    执行: npm run start

    打开index.html      出现了hello React    解析react并且打包成功。

     现在需要解决一个问题:

                在app.js中添加如下代码:

                class  App extends Component{

                      ++click = ()=>{

                 alert("ok");

                 }

                 render(){

                 return (

                 )

                 }

                }

    执行: npm run start, 

    出现了语法错误。

大家可能在想我们不是用了react的presets吗,怎么还会报错了。让我看看react的presets包含哪些东西。

 看到了吧。插件中没有解析类属性的。所以需要我们手动的去安装一个能解析这种语法的插件。    

https://babeljs.cn/docs/plugins/syntax-class-properties/#top

在命令行使用: npm i -D babel-plugin-transform-class-properties  

            安装完以后，我们要在哪里使用这个插件。

            在 use 中对象中有一个options对象的属性。options对象中又有一个plugins属性专门用了放入你需要的额外插件》

            代码如下:

rules:[

{

//匹配规则

test :/\.js$/,

use  : {

//需要的加载器

loader : "babel-loader",

//loader 的可选项

options :{

//预先设置

presets : ['env','react'],

                                                        //插件存放的地方（引入 babel-plugin-transform-class-properties  这种类似的,只需要填上babel-plugin后面的就可以了）

 ++plugins : ['transform-class-properties']

}

}

}

]

        在执行: npm run start;

        现在可以正常打包完成，并且打开html也没问题了。

我们可以把options对象中的属性放到一个叫.babelrc的文件中，babel-loader会根据.babelrc里的配置去解析代码。

这个文件需要跟webpack.config.js同级

        在根目录创建.babelrc.添加如下代码,

    {

        "presets" : ["react","env"],

        "plugins" : ["transform-class-properties"]

    }

    删除options对象;,如下

{

//匹配规则

test :/\.js$/,

use  : {

//需要的加载器

loader : "babel-loader",

}

}

        执行: npm run start.  

现在有一个疑问, 引入的包需要我们去解析或者向下兼容吗？ 比较成熟的包，毫无疑问，是不需要的，研发人员已经做到很好了。所以我们需要排除的引入的包和不需要要解析的包。

有一个exclude可以排除掉不需要使用当前规则中的加载器去解析的文件.

在webpack.config.js中添加如下代码:

{

//匹配规则

test :/\.js$/,

use  : {

//需要的加载器

loader : "babel-loader",

//loader 的可选项

},

                //排除掉不需要兼容的模块

                          ++exclude :[

                                    path.resolve(__dirname,'node_modules'),

                                ]

   }

 打包时间明显快了很多。