webpack了解

一、理解webpack

什么是webpack?

　　是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。"

二、前期准备

1.安装

　　npm install --savd-dev webpack //下载

　　npm init -y //初始化下载package.json 保证node是最新的

　　新建一个webpack.config.js文件，这里面放置的就是怎样实现打包的代码

2.我们可以更改运行webpack的命令

　　在package.json中有个scripts中添加 "build":"webpack" 那么执行webpack的话就可以用 npm run build

3.webpack中各个文件的作用

　　package.json的作用是对webpack进行初始化

　　webpack.config.js是对文件夹中的文件进行操作，里面都是需要对哪些文件进行什么样子的操作

以上基本的操作完成了

三、简单实现

module.exports={

    entry:{//入口文件

        index:'./index.js',

        vendor:['./web/jquery']

    },

    output:{//出口文件

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

        filename:'[name].[hash].js',//设置一个带hash的文件

    },

    module:{

        rules:[

            {//es6转es5

                test:/\.js$/,

                exclude:/node_modules/,

                loader:'babel-loader',

                query:{

                    presets:['es2015']

                }

            },

        ]

    },

    //热更新

    devServer: {

        inline: true,

        port: 8099

      },

    plugins:[

        new webpack.HotModuleReplacementPlugin(),//热更新

    ]

}

我们可以看一下，最基本的就是需要

entry:入口文件;output:出口文件;module里面放的是下载的模块和对哪些文件进行操作；plugins是引入插件

四、在项目中需要实现的功能

1、将ES6转为ES5、sass/less转成css

　　这种的话就是在module中的rules中执行特定的文件，并且使用对应的模块

2、多个入口多个出口

　　多个入口，我们需要的是使用golb设置一个全部的文件；

　　多个出口

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

filename:'[name].[hash].js',//设置一个带hash的文件

3、将css文件单独打包、js文件单独打包、引入的第三方js文件单独打包、图片转为base64

（1）css单独打包成一个文件，我们需要用到一个插件：extract-text-webpack-plugin 然后再代码中这样：

module中rules

{//css

                test:/\.css$/,

                exclude:/node_modules/,

                loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),

                //loader:ExtractTextPlugin.extract('style-loader','css-loader!postcss-loader'),

},

plugins

new ExtractTextPlugin('style.css'),//将css单独生成

（2）第三方js文件（比如jquery）

入口文件

entry:{//入口文件

        index:getfile(),

        vendor:['./web/jquery']

},

// plugins中
new webpack.optimize.CommonsChunkPlugin({//第三方插件

            name:['vendor','manifest']

}),

4、热更新

热更新的意思是，当我们修改代码的时候，保存文件之后，webpack自动进行打包

在module.export中添加

//热更新

devServer: {

        inline: true,

        port: 8099

},

plugins

new webpack.HotModuleReplacementPlugin(),//热更新

代码：https://github.com/GainLoss/My-Webpack.git

=============================================

注意：

（1）在执行webpack-dev-server --open的时候，出现找不到webpack-dev-server

解决就是安装的时候用npm install webpack-dev-server -g这个命令安装参考https://stackoverflow.com/questions/31611527/webpack-webpack-dev-server-command-not-found

要打开webpack-dev-server的时候命令必须是webpack-dev-server --open

（2）理解一下module中rules和plugins的区别：

module中rules是在打包构建过程中处理源文件，一次处理一个；

plugins是对整个构建过程进行处理

巴特西

webpack了解

最新文章

热门文章