zoukankan      html  css  js  c++  java
  • wekpack笔记

    1. webpack 是一个用来构建我们应用程序中的 JavaScript 模块的工具;

    2. 可以从CLI 或 API来开始使用 webpack。这里只讲从CLI来使用它;

    3. 安装,需要在nodejs环境中: 

      webpack需要进行全局安装: npm install webpack -g  ; 

      在项目目录下也需要进行安装:npm install webpack --save ;

       运行:在项目目录下执行webpack 进行打包;webpack -w 修改后自动打包;

    4. 如果使用到了import/export,(有些浏览器未支持)你也可以正常的使用,因为 webpack 会将其替换为 ES5 兼容的代码;

     webpack 不会更改你的代码中除 import/export 以外的部分。如果你在使用其它ES6,请确保你使用了一个像是 babel 的转译器。

    5. 文件的配置:创建一个 webpack.config.js 文件,在这个文件中使用如下的配置设置来表示上述 CLI 命令:

          var webpack = require("webpack");
          var path = require("path");

          module.exports = {

            entry: './app/index.js',       //也可以写未[path.join(__dirname,"public/js/main.js")],
              output: {

              path: path.resolve(__dirname, 'dist')    // path:path.join(__dirname,"public/js/dist"),
                  filename: 'main.bundle.js',
                  },

            module:{    //配置模块加载器;
                    loaders:[
                          {test:/.css$/,loader:"style!css"},
                          {test:/.less$/,loader:"style!css!less"},
                          {test:/.(png|jpg)$/,loader:"url?limit=8192"},
                        ]
               },

                resolve:{   //配置模块别名;
                    root:path.join(__dirname,"public"),
                    extensions:['','.js'],
                    alias:{
                        "angular":"js/angular.min",
                        "router":"js/angular-ui-router.min",
                        "register":"modules/register/register",
                        "login":"modules/login/login",
                        "main":"modules/main/main",
                        "main":"js/main"
                    }
              }

          };

  • 相关阅读:
    【转】JS对Cookie的读写删除
    【转】【Python】 python中的编码问题报错 'ascii' codec can't decode 及 URL地址获取中文
    【转】【Python】Python中的__init__.py与模块导入(from import 找不到模块的问题)
    【转】【Centos】nginx配置:location配置方法及实例详解
    【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
    【Html】Vue动态插入组件
    【HTML】div居中显示
    神奇的bug,退出时自动更新时间
    curl Array to string conversion 错误
    PHP可变参数
  • 原文地址:https://www.cnblogs.com/liaolei1/p/6861261.html
Copyright © 2011-2022 走看看