zoukankan      html  css  js  c++  java
  • webpack学习(一)

    记录学习webpack过程中,配置文件中一些需要注意的点。

    一、

    entry,入口文件。

    单入口文件:

    entry: __dirname + '/app',  // __dirname 为一个全局对象,代表当前目录

    多入口文件:

    //json格式
    entry:{ come:
    './app/index.js', out:'./app/out.js' }

    //json格式写法下,最后打包后会生成2个入口文件,比如:come.bundle.js和out.bundle.js
    //数组格式
    entry:['./app/index.js','./app/out.js']

    //数组格式写法下,最后打包后,只会打包成一个入口文件,比如:main.bundle.js

    二、

    output,输出文件。

    output中的filename在单入口中,可以直接写成:

    filename:'bundle.js'

    多入口情况下,可添加[name]-[hash]来生成:

    filename:'[name]-[hash].bundle.js'

    三、

    module。

    主要是各种加载器loaders。

    css:

    {test: /.css$/, loader: 'style-loader!css-loader'},

    在css中,style与css这两个loader不能调换位置,loader由右向左执行。先css后再style。

    四、

    plugins,插件。

    ①html-webpack-plugin

    自动根据我们书写的配置文件,生成相关的html代码,并引入入口文件。

    //下载
    npm install --save-dev html-webpack-plugin
    //在webpack.config.js中配置
    var HtmlwebpackPlugin = require('html-webpack-plugin');
    new HtmlwebpackPlugin()

    ②webpack-dev-server

    在服务器环境下,文件更改时可自动刷新。

    //下载
    npm install --save-dev webpack-dev-server
    //配置

      devServer: {
          historyApiFallback: true,  //不跳转
          hot: true,  
          inline: true,  //实时刷新
          port: 3306   //更改端口,默认8080
       }

    ③内置插件webpack.BannerPlugin() 和 webpack.optimize.UglifyJsPlugin()

    这两个插件无需手动下载,webpack内置插件。

    //plugins引入
    //作用:添加注释及一些版权信息
    new
    webpack.BannerPlugin('This file is created by hcy')
    //压缩最后生成的入口文件js
    new
    webpack.optimize.UglifyJsPlugin()
  • 相关阅读:
    gateway 实现接口日志保存
    Spring Boot应用的Controller返回的集合类数据是XML格式的可能原因
    json 转list
    观察者模式
    Quartz定时任务整理
    java通过word模板生成word文档
    基于mysql的单据号生成(前缀+日期+自增id+后缀)
    Rabbitmq详解
    java.sql.SQLException: connection holder is null 问题处理
    为什么要用消息队列或消息队列的优缺点
  • 原文地址:https://www.cnblogs.com/hcy1996/p/6474218.html
Copyright © 2011-2022 走看看