zoukankan      html  css  js  c++  java
  • 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文件

     
  • 相关阅读:
    java设计模式笔记(1)-适配器模式
    linux下源码编译安装mysql
    spring boot入门
    2016年终总结
    CentOS获取公网IP
    shell中的$0 $n $# $* $@ $? $$
    shell中各种括号的作用详解()、(())、[]、[[]]、{}
    10个实战及面试常用Linux Shell脚本编写
    记录centos下nl与cat -n的不同
    grep、cut、awk、sed的使用
  • 原文地址:https://www.cnblogs.com/manru75/p/9675270.html
Copyright © 2011-2022 走看看