美文网首页
一 webpack 初识

一 webpack 初识

作者: i0S_毛_宇 | 来源:发表于2019-05-16 09:32 被阅读0次

DEMO

初始化

  mkdir webpack-test
  cd webpack-test
  npm init
  npm install webpack  --save-dev

创建 hello.js hello.css

hello.js

// require('style-loader!css-loader!./hello.css')
require('./hello.css')

function hello(str) {
    alert(str);
}

hello('hello world')
hello.css

html, body {
    background-color: red;
}

执行webpack生成命令

 // webpack hello.js -o ./dist/hello_bundle.js --watch
 webpack hello.js -o ./dist/hello_bundle.js --module-bind 'css=style-loader!css-loader' --watch

看效果,创建一个index.html

<!DOCTYPE html>
<html>
<head>
    <title>webpack-test</title>
</head>
<body>
    <script type="text/javascript" src="./dist/hello_bundle.js"></script>
</body>
</html>

相关文章

  • 初识webpack4.x(一)

    系列文章 初识webpack(一) 初识webpack(二)之常用插件配置 初始webpack(三)之环境分离终结...

  • 一 webpack 初识

    DEMO 初始化 创建 hello.js hello.css 执行webpack生成命令 看效果,创建一个inde...

  • 初识Webpack(一)

    1.1什么是WebPack webpack 是一个现代 JavaScript 应用程序的静态模块打包工具:它做的事...

  • webpack 初识

    1.Webpack是什么,它有什么作用 把你的项目当做一个整体,通过一个给定的主文件(如:index.js),We...

  • 初识Webpack

    标签(空格分隔): 前端 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依...

  • 初识 webpack

    1. 初始化项目 首先,让我们用命令行创建一个名为 webapp 的项目文件夹,初始化 npm,本地安装 webp...

  • webpack初识

    webpack-demo Git Repowebpack-API Concepts 概念 At its core,...

  • 初识webpack

    今天有空,刚好学习了一点webpack相关的知识,在这里整理一番。 下面会给上我的GitHub,里面有6个小dem...

  • webpack 初识

    webpack 构建流程 初始化参数,从配置文件和 shell 语句中读到的参数合并,得到最后的参数 开始编译:用...

  • webpack初识

    1. webpack是什么? webpack是一个模块化开发的打包工具,基于nodejs开发的 2. webpac...

网友评论

      本文标题:一 webpack 初识

      本文链接:https://www.haomeiwen.com/subject/anhbaqtx.html