webpack---安装与卸载

https://segmentfault.com/q/1010000015200625

看这个就会了

更新webpack版本

方法1：

（1）删除node_modiles文件

（2）在终端输入npm install --save-dev webpack 重新安装

方法2：

（1）若里面本来就有一些老旧的依赖包，则打开package.json

（2）找到

"devDependencies": {

　　"webpack": "^3.12.0",

}

更改你需要的版本，比如3.12.0

（3）删除node_modiles文件

（4）在终端输入npm install

这样会把其他的依赖包都安装上

--------------------------------------------------------------------------------------------------------------------------------------

适用于3.X版本

一次初学者的简单 Webpack打包

安装的不是全局，

查看版本的话在终端的项目文件下输入（注意斜杠是回车上面的）：

node_modules.binwebpack -v

打包：

node_modules.binwebpack srcentry.js distundle.js

将src文件夹下entry.js文件打包到dist文件夹下的bundle.js

————————————————————————————————————————————

正式的 Webpack打包

（1）前提是：在项目目录下先建立src文件夹和dist文件夹

src文件夹下新建entry.js文件，内容为：

document.getElementById('title').innerHTML = 'Hello Mrc!';

dist文件夹下新建index.html文件，内容为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Mrc webpack practice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id='title'></div>
    <script src='./bundle.js'></script>
</body>
</html>

注意：引入了bundle.js

（2）在项目目录下建立webpack.config.js文件，文件内容为：

const path = require('path');
module.exports={
    //入口文件的配置项，可以是单一入口，也可以是多入口。
    entry:{
        entry:'./src/entry.js',
    },
    //出口文件的配置项,在webpack2.X版本后，支持多出口配置。
    output:{
        //输出的文件名称
        filename:'bundle.js',
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist')
        
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

（3）终端输入node_modules.binwebpack 即可打包成功

成功后dist文件夹下生成bundle.js文件

——————————————————————————————————————————

以上是单一入口文件，打包多个入口文件只需修改webpack.config,js文件内容如下：

const path = require('path');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        //输出的文件名称 入口名字是什么出口文件名字就是什么
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
        
    },
    module:{},
    plugins:[],
    devServer:{}
}

在dist目录下的Index.html文件中引入

    <script src='./entry.js'></script>
    <script src='./entry2.js'></script>

终端输入node_modules.binwebpack 即可打包成功

成功后dist文件夹下生成entry.js文件和entry2.js文件