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文件