• 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

     

  • 相关阅读:
    hdu 6085 bitset优化
    hdu 6070 二分答案+线段树
    hdu 6069 区间筛
    hdu 6058 并查集
    CF 835D D. Palindromic characteristics 字符串hash
    (转)Linux整合apache和tomcat构建Web服务器
    iTunes备份文件路径
    mac下Apache添加限速模块mod_bw
    mac显示隐藏文件夹
    Mac OS X下HomeBrew安装卸载
  • 原文地址:https://www.cnblogs.com/kaixinyufeng/p/8158657.html
Copyright © 2020-2023  润新知