为了账号安全,请及时绑定邮箱和手机立即绑定

请问webpack angular 指令文件怎么打包?

/ 猿问

请问webpack angular 指令文件怎么打包?

翻阅古今 2019-09-18 12:13:27

webpack angular 指令文件怎么打包?


查看完整描述

5 回答

?
慕妹3242003

安装Webpack及其他组件安装Webpack之前建议先安装Node.js,然后采用npm的方式来安装Webpack:npm install webpack -g因为要用到angular,所以要安装angular:npm install angular

还要安装一系列加载器(loader):

npm install style-loader css-loader url-loader sass-loader raw-loader

注意:除了webpack是全局安装之外,其他组件都是安装在app文件夹下面,会自动生成node_modules文件夹。

3.配置文件webpack.config.js

4.入口文件index.js

require用于引入外部模块(可以是对象,可以是函数,可以是css样式,可以是html页面等)

5.主页面index.html

可以看到主页面是非常干净清爽的,只引入了一个输出文件bundle.js,然后html标签里加了ng-app="app"。

6.指令文件hello-world.jsmodule.exports用于将模块(文件)作为一个接口(一般是一个函数)暴露给外部。

7.其他文件(style.css、hello-world.html、hello-world.scss)

8.编译和运行

在命令行工具中输入:webpack,即可编译。

我们会遇到第一个坑:这个错误的关键行在"You may need an appropriate loader to handle the file type",大概意思就是你的加载器(loader)不正确,可是我们明明安装上了所有的加载器啊,也在配置文件中引用了呀,原来问题出在配置文件中的"module"下的"loader"应该是"loaders",就因为少了一个"s",浪费我一上午的时间。

修改过来之后,编译通过了,我们在浏览器中打开主页面index.html,这时遇到了第二个坑:

大概意思是你跨域了,不能加载hello-world.html这个文件,问题出在指令文件hello-world.js中的引用模板地址的代码:

templateUrl: 'directives/hello-world/hello-world.html'

在网上搜到一个解决办法,就是使用Node.js自带的的http-server.

使用之前要先安装express:npm install express,然后在命令行工具中输入node server.js开启服务,这时在浏览器中输入:localhost:8000/index.html即可访问主页面。

另外一个方法是用require的方式引入hello-world.html:template: require('./hello-world.html')



查看完整回答
反对 回复 2019-09-25
?
HUWWW

当作为背景图的时候,小于limit的时候,会以 base64 显示图片,当图片大于 limit 的时候会将图片生成到 image/ 目录下,但是奇葩的地方出现了
background-image:url("../image/xxx.jpg")
//在打包后的css文件会变成
background-image:url(image/xxx.jpg)
//没有了 ../ 和双引号,尽管image目录下有图片,但是引用路径不对

查看完整回答
反对 回复 2019-09-25
?
慕哥6287543

好吧,自己二了,在package.json的build命令前执行自定义的文件写入js就可以了。。
"scripts": {
"dev": "node build/create-index.js && node build/dev-server.js",
"build": "node build/create-index.js && node build/build.js"
}

查看完整回答
反对 回复 2019-09-25
?
慕娘9325324

解决webpack打包文件体积问题: 确实每打包入口始parse所依赖候竟打包要2秒简直能忍几解决案效使用weboackwatch文件md5变化才重新打包并且parse变

查看完整回答
反对 回复 2019-09-25
?
UYOU

安装webpack,可以挫下面的地址 下载完成以后就可以一直下一步安装了。我是安装在了d盘的根目录下 安装完成以后可以使用cmd输入命令查看是否安装成功。 再通过查看环境变量,我们可以看到下面的D:\nodejs\ 说明确实安装成功了 2.配置npm的路径 n...

查看完整回答
反对 回复 2019-09-25

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信