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

     

  • 相关阅读:
    五步搞定Android开发环境部署
    centos7安装MongoDB3.4
    java数据结构之三叉链表示的二叉树
    java数据结构之二叉树遍历的非递归实现
    java数据结构之二叉树的定义和递归实现
    java数据结构之树
    java数据结构之递归算法
    java数据结构之(堆)栈
    redis主从复制配置
    Redis 发布订阅
  • 原文地址:https://www.cnblogs.com/kaixinyufeng/p/8158657.html
Copyright © 2011-2022 走看看