博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack
阅读量:5292 次
发布时间:2019-06-14

本文共 778 字,大约阅读时间需要 2 分钟。

一、webpack安装和命令行

  打开cmd命令行,新建一个webpack-test文件夹,然后进入该文件夹中。

mkdir webpack-testcd webpack-test

  进行初始化。(之后会出现一系列提问,可一直按回车键直至完成)

npm init

  开始安装webpack。

npm install webpack --save-dev

  在webpack-test文件夹下新建hello.js文件。用编辑器打开进行编码。

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

  在cmd中对该文件进行打包。(在要打包的文件名后面跟上打包后的文件名)

webpack hello.js hello.bundle.js

  或者:(进行实时监听,当文件内容改变时,不需要再进行打包这一步骤)

webpack hello.js hello.bundle.js --watch

  当需要在hello.js文件中引入css类型文件时,需要安装loader。命令如下:

npm install css-loader style-loader --save-dev

  引入css文件代码如下:

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

 

二、建立项目的webpack配置文件

  按照以上步骤建立webpack-demo文件夹,然后建立src文件夹(存放代码源文件)、dist文件夹(存放打包后的代码)。

  给项目新建一个初始化的index.html页面,在页面中引入名为bundle.js的打包文件。

  在src目录下新建script文件夹和style文件夹。

 

转载于:https://www.cnblogs.com/xuemei/p/7282037.html

你可能感兴趣的文章
PHP中XPATH 实现xml及html文件快速解析(附xml做小型数据库实现六级单词快速查询实例)...
查看>>
2017-2018-2 20155309 南皓芯 Exp9 Web安全基础
查看>>
Leetcode Reverse Words in a String
查看>>
一文读懂内网、公网和NAT
查看>>
NotMapped属性特性
查看>>
go 语言 基础 类型(1)
查看>>
idea的初次使用
查看>>
正则表达式
查看>>
golang数据结构之定时器篇
查看>>
IBM内存三技术:Chipkill、MPX、MM
查看>>
css3伪类元素
查看>>
php部分,一个用递归无限分类的方法
查看>>
android,eclipse
查看>>
SpringBoot 上下文获取注入的Bean
查看>>
归并排序的进一步理解
查看>>
C - Wooden Sticks
查看>>
Spring boot中普通工具类不能使用@Value注入yml文件中的自定义参数的问题
查看>>
[8.3] Magic Index
查看>>
(转·)WMPLib
查看>>
C语言结构体对齐
查看>>