道者编程


webpack4 打包步骤(一)

1:安装nodejs

2:替换源:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3:安装webpack-cli 

4:全局安装webpack和webpack-cli,webpack4这两个是分开的。因为换成了淘宝的源,就可以用淘宝的cnpm。

cnpm install webpack -g
cnpm install webpack-cli -g 


安装成功

5:新建项目

建立一个项目目录,我这里在F:\www\goods,进入到这个目录

然后初始化

cnpm init

一路回车即可


这时候goods目录下就生成一个 package.json 文件

6:为了更好的项目管理,我们在项目目录里面安装一份独立的Webpack,在项目目录,这里是F:\www\goods,执行

cnpm install --save-dev webpack


执行成功后,会生成一个node_modules目录,这就是webpack模块

同时package.json文件也会改变,这是新增加的



7:安装css-loader和style-loader

cnpm install style-loader css-loader --save-dev
 

执行后package.json又发生了变法,增加了这两个东西。

css-loader和style-loader是啥:css-loader使你能够使用类似@import和url(...)的方法实现require的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包,也就是这个东西能够打包css。

7:开始打包

(1):自定义手动打包

准备工作:

建立几个文件:

index.html;main.js;hello.js;syle.css

index.html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webpack</title>
</head>

<body>
<p>webpack</p>
</body>
</html>
main.js

require('./hello.js'); //我们要打包这个js文件

// webpack只加载js文件,需要使用css-loader用来使webpack可处理css文件
//style-loader用来将css的style转换为<style>标签中的样式,插入到HTML文件中。
require('style-loader!css-loader!./style.css'); 
hello.js

function world() {
    return {
        text: 'Hello World!'
    };
}

var text = world().text;
document.write(text);
style.css

html body {
    margin: 0;
    bottom: 0;
    background:#FF0000;
}
 

(1)打包,退后开始装逼了。

3系列版本用 webpack main.js hello.bundle.js –watch  打包,高版本,4系列用下面打包

webpack main.js --output-filename hello.bundle.js --mode development

打包成功,看一下目录

执行成功后,生成了一个dist目录,并且把打包文件hello.bundle.js写入到了该目录,当然也可以指定打包的特点目录。

最后我们把hello.bundle.js加入到index.html里面


打开浏览器看一下


引入成功,这就是一个基本的打包,把js和css打包成了一个文件,应用这一个文件就OK了,这就是所谓的模块化。

 webpack main.js --output-filename hello.bundle.js --output-path add --mode development

--mode development 开发模式
--mode production 生产模式
--output-filename 输出文件
--output-path 输出路径 不加这个默认dist



最新评论:
我要评论:

看不清楚


链接