首页 > web前端 > html教程 > webpack~_html/css_WEB-ITnose

webpack~_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 08:59:36
原创
1167 人浏览过

呼呼...终于考完试了,好久没有更新博客了,感觉这里荒草丛生了,虽然知道没什么人看我的文章但还是很想更啊...

虽说一直是在准备期末考试,但还是有一直在学前端的新技术哒,只是一直没什么时间写,接下来我会陆陆续续把我学到的有趣东西记录到这里来~

1 对webpack的认识(webpack能解决什么问题)

一直都是写html,然后写css和js,然后各种link和script一进来,也没觉得有什么不妥,所以刚接触webpack各种晕啊,但没办法,前端工程化是潮流嘛~

webpack能解决的问题:

*可以像写nodejs一样,在前端中对js文件各种exports和require,还有css,和图片也是被当作模块来加载的,是不是叼叼的...

*可以通过加载器对sass文件啊,coffeescript啊,jsx啊,ES6啊等自动执行转译...

*各种打包压缩...

2 webpack的语法(怎么用)

(1)webpack是npm包下的一个包,所以可以通过  npm install webpack -g 来全局安装,一般工具类的都是全局来安装的...

(2)配置文件webpack.config.js,这是我在一个简单的项目中的配置:

需要重点说一下就是entry是用来声明入口文件的,入口文件通俗点说就是在里面各种require js和require css,像这样:

然后各种加载器(loader)就会通过匹配文件的后缀名对它们进行各种转译,紧接着会把这些文件捆绑成一个文件,指定output就是用来指定捆绑后的文件的存放位置的。

比如我在这里指定了捆绑后的文件的文件名为bundle.js,创建一个名为out的文件夹,把它存放在里面,嗯接下来就可以在html里面通过

<script src="./out/bundle.js"></script>
登录后复制

引入你之前require的所有文件,各种css,js啊都被捆绑成一个bundle.js文件然后被引用...

上面说到的加载器,需要我们去通过npm下载相应的依赖,比方说babel-loader,当webpack检测到.js或.jsx后缀或者ES2015的时候,它会帮我们调用babel来转译它们,

但是babel不是webpack自己有的,我们要自己去下载。新版的babel被分成babel-core和babel-cli,这里我们只需要babel-core就行,这是我的package.json文件:

{  "name": "taobao_web",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.4.0",    "babel-loader": "^6.2.1 ",    "babel-preset-es2015": "^6.3.13",    "babel-preset-react": "^6.3.13",    "css-loader": "^0.23.1",    "file-loader": "^0.8.5",    "sass-loader": "^3.1.2",    "style-loader": "^0.13.0",    "url-loader": "^0.5.7"  },  "dependencies": {    "node-sass": "^3.4.2"  }}
登录后复制

你可以把它复制过去作为你的package.json文件,再npm install一键安装就行,也可以像下面这样单独安装(不全,根据需要选择安装就行):

npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev
登录后复制

相应的加载器,依赖安装完之后,把需要转译打包的文件放在入口文件那里,在命令行输入 webpack -w,自动帮你做好工作。

上面举的例子是比较简单的,再复杂点的会有多个入口文件,这时候你可以把入口文件写出这个样子:

entry: {    page1: "entry.js",    page2: "entry2.js"},output: {    path: path.join(__dirname, 'out'),    publicPath: "./out/",    filename: '[name].js'}
登录后复制

将会被捆绑成两个文件page1.js和page2.js...

3 注意点...

等我后面想到再补充吧~

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板