zoukankan      html  css  js  c++  java
  • 一步步学习webpack 1

    webpack-cli 依赖 webpack4.x.x
    webpack 的安装webpack-cli 必须是全局的,不然运行webpack 命令时会提示安装webpack-cli,但是提示的是-d模式,即使安装了再次运行webpack还是会提示你安装webpack-cli;
    配置文件 mode: development|production 表示编译模式
    output 的path 值必须是 绝对路径,使用path.resolve(__dirname)+想要的路径即可,__dirname 是当前文件的路径,path.resolve是用来构建绝对路径的
    在某个目录下执行webpack 就是默认 使用webpack.config.js 中的配置 调用webpack,也可以直接使用webpack api来调用
    webpack.config.js 
    const path = require("path");
    module.exports = {
    entry:"./src/main.js",
    output:{
    	filename:"[name].js",
    	path:path.resolve(__dirname, 'dist')
    
    },
    mode:"production"
    
    
    
    }
    package.json中 script可以加入
    "start":"webpack webpack.config.js"
    运行 npm  start 即可。其他的脚本需要使用 npm run xx
    
     
    
    node 目前不支持 import语法,但webpack打包的文件支持import,也支持import某个文件中的 单独的一项(但实际上整个文件都会先执行一遍,而且js文件也会全部引入)
    单纯使用 webpack 编译出来的js会将当前模块没有使用的变量和方法删除, dev js的结构是:
    
    (function(modules){
      xxxx
    })({
    "模块名":function(){"use strict" eval(模块代码)}//模块名 就是 import 时的 名字
    })
    
    webpack编译出来的js如果含有es6代码是不会转换成ES5的,但是转换的文件中使用了 Object.defineProperty 导致ie9以下无法使用,ie9以下能使用,可以手动将Object.defineProperty转换一下(或者有其他配置)
    
    纯webpack 编译出来的 production 的js结构是
    !function(e)
    {}([function(){
    依次摆放各模块的js
    
    }])
    同样由于使用了Object.defineProperty 不支持ie9,还有使用了 xx.保留字 低版本ie也不支持
    

      

  • 相关阅读:
    MVC模型验证
    AutoMapper完成Dto与Model的转换
    【转】Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案
    MVC过滤器详解
    IOC框架Ninject实践总结
    【转】NHibernate对象以及状态说明
    轻量级IOC框架:Ninject (上)
    mysql5.7 误删管理员root账户
    杂项
    X-Pack权限控制之给Kibana加上登录控制以及index_not_found_exception问题解决
  • 原文地址:https://www.cnblogs.com/chillaxyw/p/9852637.html
Copyright © 2011-2022 走看看