admin 管理员组文章数量: 887021
webpack~
呼呼...终于考完试了，好久没有更新博客了，感觉这里荒草丛生了，虽然知道没什么人看我的文章但还是很想更啊...
虽说一直是在准备期末考试，但还是有一直在学前端的新技术哒，只是一直没什么时间写，接下来我会陆陆续续把我学到的有趣东西记录到这里来~
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": "tureLove",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.11"
},
"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",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.14.1"
}
}
你可以把它复制过去作为你的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 注意
##webpack的各种加载器本身是不具备各种转译功能的，比如babel加载器，它自己是不能转译jsx文件或者es6的，但是当它检测到jsx或者es6代码的存在的时候，会帮你去调用babel-core还有相应的预设来转译它们。
##如果你是windows系统，因为不像mac并不自带ruby环境，所以sass是转译不了的，webpack会提示你缺少node-sass模块，你也不需要去大费周章的装ruby环境，
直接 npm install node-sass --save-dev 把node-sass作为开发依赖安装即可。
转载于:.html
本文标签： webpack
版权声明：本文标题：webpack~ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687217518h77443.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论