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是对整个构建过程进行处理