• webpack学习1-打包


    webpack是前端开发的包管理工具,优化开发流程

    1. npm init

    2.  npm install --save-dev webpack

    3.创建 app public两个文件夹

    • index.html --放在public文件夹中;
    • Greeter.js-- 放在app文件夹中;
    • main.js-- 放在app文件夹中;

    4.增加代码

    index.html加入如下文件

    <!-- index.html --> <!DOCTYPE html>
    <html lang="en"> <head> <meta charset="utf-8">
    <title>Webpack Sample Project</title>
    </head>
    <body>
    <div id='root'> </div>
    <script src="bundle.js"></script>
    </body>
    </html>
    

    greeeter.js  增加如下

    module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!"; return greet;
    };
    

      

     
    5.编译打包
    一。命令方式.webpack app/main.js public/bundle.js
    二。配置文件方式
    1.创建 webpack.config.js
    module.exports = {
       entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
         output: { path: __dirname + "/public",//打包后的文件存放的地方
           filename: "bundle.js"//打包后输出文件的文件名
    } }
    

      这样打包时只需输入 webpack即可,是不是很方便

    三。更快捷的打包方式

    package.json 增加如下

    "scripts": { "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除 }

    打包时输入:

    npm start
    可以达到同样的效果


    
    
  • 相关阅读:
    python mysql操作
    常用sql语句总结
    python 正则表达式总结
    hdu 6199 dp
    hdu 6212 区间dp
    hdu 6214 割边最少的最小割
    2017沈阳网络赛G XOR 分块(分类讨论sqrt)
    HDU 6166 二进制分组
    hdu 6194 后缀数组
    hdu 6201 树分治
  • 原文地址:https://www.cnblogs.com/menchao/p/8399598.html
Copyright © 2020-2023  润新知