zoukankan      html  css  js  c++  java
  • webpack的使用

    1. npm init
    2. npm install webpack -g
    3. 根目录下创建index.html并引入dist里生成的的js
    4. 在入口a.js文件,引入js和 css文件
    5. 根目录下创建webpack.config.js,注意__dirname是两个下划线
      module.exports = {
          entry: {
              a:__dirname + '/src/script/a.js',
              b:__dirname + '/src/script/b.js'
          },
          output: {
              path: __dirname + '/dist/js',
              filename: "[name].js"
          }
        }
      

        

    6. 运行前,npm install style-loader css-loader --save-dev,且在require中添加style-loader!css-loader!
      require('./b.js');
      require('style-loader!css-loader!../css/style.css');
      function a() {
          alert('a')
      }
      a();
    7. Terminal控制台输入webpack,自动读取webpack.config.js配置文件,进行打包,dist中会自动生成output输出的js
    8. 目前根目录下的index.html引入的js是手动添加的a.bundle.js,如果要加入多个生成的js,那么需要用插件html-webpack-plugin,首先是安装npm install html-webpack-plugin --save-dev;然后是在webpack.config.js中加入如下代码
    9. 同样terminal中输入webpack后,在dist文件中会生成一个默认的index.html文件,文件中引入了dist中所有的js文件。注意,如遇到

      C:webpack-re>webpack
      module.js:471
      throw err;
      ^

      Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
      at Function.Module._resolveFilename (module.js:469:15)
      at Function.Module._load (module.js:417:25)
      at Module.require (module.js:497:17)
      at require (internal/module.js:20:19)
      at Object.<anonymous> (C:webpack-re ode_moduleshtml-webpack-pluginlibcompiler.js:11:26)
      at Module._compile (module.js:570:32)
      at Object.Module._extensions..js (module.js:579:10)
      at Module.load (module.js:487:32)
      at tryModuleLoad (module.js:446:12)
      at Function.Module._load (module.js:438:3)
      at Module.require (module.js:497:17)
      at require (internal/module.js:20:19)
      at Object.<anonymous> (C:webpack-re ode_moduleshtml-webpack-pluginindex.js:7:21)
      at Module._compile (module.js:570:32)
      at Object.Module._extensions..js (module.js:579:10)问题。解决办法是,项目中安装npm install webpack

    10. 下一步把跟目录下index.html与dist中生成的html合并。

    
    
  • 相关阅读:
    分子动力学中步长的选取
    提高编程能力刷题网站
    【18】如何把数据存储到MongoDB数据库
    【17】有关python面向对象编程的提高【多继承、多态、类属性、动态添加与限制添加属性与方法、@property】
    【16】有关python面向对象编程
    【15】杂记章节
    【14】文件读取并格式化处理
    【13】python time时间模块知识点备查
    【11】python 递归,深度优先搜索与广度优先搜索算法模拟实现
    6380. 【NOIP2019模拟2019.10.06】小w与最长路(path)
  • 原文地址:https://www.cnblogs.com/jiaoyue/p/7520425.html
Copyright © 2011-2022 走看看