• webpack学习笔记


    1.安装webpack

    npm install webpack -g

    2.进入项目目录,初始化

    npm init

    3.将webpack安装到项目依赖中

    npm install webpack --save-dev

    4.创建一个webpack.config.js配置文件

    module.exports = {

      // 需要编译的文件
      entry:{
        index1:'./src/index1.js',
        index2:'./src/index2.js'
      },

      // 编译配置项
      output:{

        // 输出到哪个目录
        path:'./dire',

        // 文件名 [name]会根据entry的键名来取值
        filename:'[name].js'
      }
    };

    目录结构:

    5.cmd中输入:webpack

    结果会生成一个dire目录。

    OK,完成。

    我们看看里面生成的代码。

    乱七八糟的,如果想去掉这些可以这样。

    var webpack = require('webpack');

    module.exports = {
      entry:{
        index1:'./src/index1.js',
        index2:'./src/index2.js'
      },
      plugins:[
        new webpack.optimize.UglifyJsPlugin()
      ],
      output:{
        path:'./dire',
        filename:'[name].js'
      }
    };

    好像没啥用对吧,我们可以这样。

    webpack小试身手,模块化开发。

    目录结构

    module.exports = {
      entry:'./main.js',
      plugins:[
        new webpack.optimize.UglifyJsPlugin()
      ],
      output:{
        path:'./dire',
        filename:'main.js'
      }
    };

    这里将main.js做为主模块,我们可以在main.js里面将需要用到的js文件通过require引入进来,达到模块化的需求,这个require的用法和nodejs一样。

    当然你可以划分成多个模块,你只需要更改一下这个。

    module.exports = {
      entry:{

        xx:'./xx/xx.js',

        xx:'./xx/xx.js'

        .......

      },
      plugins:[
        new webpack.optimize.UglifyJsPlugin()
      ],
      output:{
        path:'./dire',
        filename:'[name].js'
      }
    };

    这样你就可以根据不同模块编写JS代码了。真不错。

    但这都只是冰山一角,来看看webpack更强大的功能。

    在main.js中导入css文件。

    main:require('./src/index.css');

    但是发现报错了,我们需要配置一下webpack.config.js

    编译css

    var webpack = require('webpack');

    module.exports = {
      entry:'./main.js',
      plugins:[
        new webpack.optimize.UglifyJsPlugin({
          compress:{

            //去除控制台错误
            warnings:false
          }
        })
      ],
      output:{
        path:'./dire',
        filename:'main.js'
      },
      module:{
        loaders:[
          {test:/.css$/,loader:'style-loader!css-loader'}
        ]
      }
    };

    还得安装一下

    npm install style-loader css-loader --save-dev

    在main.js里面使用less文件。

    require('./src/index.css');

    require('./src/less.less');

    需要进行如下配置:

    loaders:[
      { test: /.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /.css$/, loader: 'style-loader!css-loader' }
    ]

    还得安装style-loader,css-loader,less-loader

    npm install style-loader css-loader less-loader --save-dev

    我安装完,webpack编译less文件的时候发现报错了。原来是还得安装一下less.

    npm install less --save-dev

    来看一下页面的效果:

    我们用require过来的css文件变成style样式。

    除了这个,我们还可以用来处理图片,将图片转成base64

    main.js

    require('./src/index.css');

    require('./src/less.less');

    var img = document.createElement('img');
    img.src = require('./src/baidu.png');

    var box = document.getElementById('box');
    box.appendChild(img);

    webpack.config.js

      

    loaders:[
      { test: /.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /.css$/, loader: 'style-loader!css-loader' },
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]

      

    limit:表示图片小于多少就转成base64格式的图片。

    使用前我们还得安装一下url-loader

    npm install url-loader --save-dev

    webpack

    看看效果

    生成base64位了噢。

    在css,less中都是可以使用的噢。

    less代码

    ul{
      li{
        200px;
        height:200px;
        color:red;
        font-size:18px;
        background:url(./baidu.png) no-repeat;
      }
    }

    webpack实在太棒了。

    如果你想编译其他格式的文件使用方法都差不多,这里就不试了。

    通过webpack --watch监听文件变化自动打包。

  • 相关阅读:
    MyCat 监控与日志查看
    Python--day40--threading模块
    Python--day40--主线程和子线程代码讲解
    Python--day40线程理论
    Python--day39--进程池的回调函数callback
    Python--day39--进程池原理及效率测试
    Python--day39--管道和数据共享(面试可能会问到)
    Python--day38--JoinableQueue解决生产者消费者模型
    Python--day38---进程间通信--初识队列(multiprocess.Queue)之生产者,消费者模型
    NPOI vs EPPlus 导出Excel简单对比
  • 原文地址:https://www.cnblogs.com/pssp/p/5818695.html
Copyright © 2020-2023  润新知