• webpack前端模块打包器


    webpack前端模块打包器

    学习网址:

    https://doc.webpack-china.org/concepts/

    http://www.runoob.com/w3cnote/webpack-tutorial.html --菜鸟教程

    https://segmentfault.com/a/1190000006178770 --入门webpack

    常用:

    0、DatePicker日期控件(http://design.alipay.com/develop/web/components/date-picker/)

    1、moment.js格式化时间 (http://momentjs.cn/)

    2、Ant design (https://ant.design/components/alert-cn/)

    (一)Webpack基本介绍

    命令:

    1、初始化npm : npm init

    2、安装webpack: npm install webpack --save-dev

    3、打包某一文件:webpacke filename.js filename.bundle.js (webpackage 打包前文件 打包后文件)

    4、安装CSS Loader  : npm install css-loader style-loader  --save-dev  (注意css-loader要与style-loader配合使用)

         JS中引入一个CSS文件,需要先require它的css-loader,再引入css文件即可。

        

         HTML直接引入bundle.js文件即可

    css-loader:使得webpack能处理.css文件

    style-loader:通过css-loader处理完的一个文件,把处理完的文件新建一个<style>标签插入到HTML的<head>标签

                         (即样式被加到了<head>标签中)

    通过命令行工具指定css-loader和style-loader

    webpack filename.js filename.bundle.js --module-bind 'css=style-loader!css-loader'

    命令行输入webpack :可以查看webpack下的所有参数

    (二)Webpack基本配置

    1.建立项目的webpack配置文件

    【1】内部配置webpack.config.js

    (1)entry:指定文件入口

    (2)output:指定文件输出位置,文件名及webpack后chunk的文件名

     【2】修改/添加webpack参数

    文件,修改scripts中的配置即可

    2.建立项目的webpack配置文件

    webpack配置的entry和output new

     

  • 相关阅读:
    从nsurlsession、Alamofire到moya
    ssl是tcp的会话层与表示层
    Springboot+Thymeleaf+layui框架的配置与使用
    机械思维 信息思维
    路在何方—价值观、价值链与人生(草稿)
    世界由物质、能量、信息
    http_build_query()函数使用方法
    laravel 远程一对多实例
    MySQL中的float和decimal类型有什么区别
    mysql int(19) float(7,2) decimal(7,2)对比
  • 原文地址:https://www.cnblogs.com/kaixinyufeng/p/8158657.html
Copyright © 2020-2023  润新知