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\.bin\webpack -v
打包：
node_modules\.bin\webpack src\entry.js dist\bundle.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\.bin\webpack  即可打包成功

成功后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\.bin\webpack  即可打包成功

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

 
posted @ 2018-09-19 16:30  灭世的蜜糖  阅读(597)  评论(0)    收藏  举报