firemail
标题: Webpack 是什么? [打印本页]
作者: java 时间: 2017-8-15 16:40
标题: Webpack 是什么?
如果你已经熟悉了 Webpack,随时可以跳过下面的说明。如果你没有使用过 Webpack,下面是一个快速介绍:
Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出他们的依赖关系,将它们打包为可部署的静态资源。 一个基本的例子,想像我们有一些 CommonJS 模块,它不能直接在浏览器中运行,所以我们需要打包成一个文件,这样就可以通过<script> 标签加载。Webpack 可以遵循 require() 调用的依赖关系,为我们完成这些工作。
但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子:
- 转换 ES2015,CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
- 可以选择在编译之前检验你的源代码;
- 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中;
- 将 SASS 文件转换为纯 CSS,然后将其转换成 JavaScript 片段,将生成的 CSS 作为 <style> 标签插入页面;
- 处理 HTML 或者 CSS 中引用的图片,移动到配置的路径中,并且使用 md5 hash 重命名。
当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南,应该可以帮助你找到 Vue.js 和 vue-loader 使用时的最常见问题的解决方案。
https://vue-loader.vuejs.org/zh-cn/
作者: java 时间: 2017-9-19 17:03
http://donglegend.com/2016/08/24 ... 4%BA%8B%E5%84%BF01/
install webpack- npm install webpack -g #首先全局安装(注意权限问题,用sudo)
- mkdir projectname && cd projectname #新建项目目录
- npm init # 初始化自动创建package.json文件,一路默认回车即可
- npm install webpack --save-dev #局部安装,写入依赖
复制代码 http://donglegend.com/2016/08/24/webpack%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF02/
配置webpack.config.js文件- # 根目录新建webpack.config.js(webpack 会自动寻找一个叫webpack.config.js的文件去执行)
- var path = require("path");
- module.exports = {
- entry: {
- app: path.resolve(__dirname, "./app/main.js")
- // entry:顾名思义入口文件,app/main.js,输入名字为 app.js
- },
- output: {
- path: path.resolve(__dirname, "./output/static"),//输出路径
- publicPath: 'static/', //调试或者 CDN 之类的域名,稍候会用到
- filename: "[name].js" //配置生成的文件名
- },
- resolve: {
- root: __dirname, //模块从里开始查找
- extensions: ['', '.js', '.vue'] //模块后缀名,先这么些,稍候会用到
- },
- module: {
- loaders: [] //模块加载器,默认null
- },
- plugins: [] //插件,默认null
- }
- # 在终端执行命令:webpack
- #(不出意外,会生成output目录,/output/static/app.js)
复制代码 启动一个http服务- # 根目录新建dev-server.js
- var express = require("express");
- var app = express();
- var port = process.env.PORT || 3000;
- app.use(express.static(__dirname+'/'));
- app.listen(port, function (err){
- if (err) {
- throw err;
- }
- console.log('Listening at http://localhost:' + port + '\n')
- })
- # 执行命令 sudo cnpm i express --save-dev
- # 安装完成 执行命令: node dev-server.js
- # Listening at http://localhost:3000
- # 服务正常启动,chrome浏览器输入 http://localhost:3000/app/views/index.html
复制代码 体验loader加载器功能sudo npm i vue vue-loader --save-dev -----使用 --save-dev 安装的 插件,被写入到 devDependencies 对象里面去 只用于开发环境 发布后vue会转成html标准,故不用相应模块了
看package.json(vue默认依赖babel等模块 http://www.ruanyifeng.com/blog/2016/01/babel.html)
- "devDependencies": {
- "babel-core": "^6.13.2",
- "babel-loader": "^6.2.5",
- "babel-plugin-transform-runtime": "^6.12.0",
- "babel-preset-es2015": "^6.13.2",
- "babel-runtime": "^6.11.6",
- "css-loader": "^0.24.0",
- "express": "^4.14.0",
- "vue": "^1.0.26",
- "vue-hot-reload-api": "^1.3.3",
- "vue-html-loader": "^1.2.3",
- "vue-loader": "^8.5.2",
- "vue-style-loader": "^1.0.0",
- "webpack": "^1.13.2"
- }
复制代码- # webpack.config.js 文件的 module增加vue和babel加载器
- loaders: [{
- test: /\.vue$/,
- loader: 'vue'
- }, {
- test: /\.js$/,
- loader: 'babel',
- query: {
- presets: ['es2015']
- },
- include: "/",
- exclude: /node_modules/
- }]
复制代码
欢迎光临 firemail (http://firemail.wang:8088/) |
Powered by Discuz! X3 |