webpack,遇见你!
2017-01-18 16:17
274 查看
webpack ---> why?
对js进行处理。
在处理js的时候,比css 要复杂的多, 与css相比, js的执行,存在相互依赖关系
比如 a.js的执行 需要依赖b.js的加载
a.js + b.js(错了) b.js --> a.js (对的)
也就是说,在处理js的时候,要处理好js相互依赖的关系,就可以对js进行文件合并、压缩
如何处理js加载的相互依赖关系? 2大规范
1. CMD ---> CommonJs Modules Definition
2. AMD ----> Asynchronous Module Definition
console.log(1);
setTimeout(function(){
console.log(2);
//回调函数 callback: 当一个函数作为一个形参传递给另外一个函数的时候,该函数就称为回调函数
console.log(3); //异步编程的特点: 代码的顺序需要靠 回调函数去维持
}, 0)
webpack 2大规范 它都支持
安装 webpack?
npm init -y; --> 自动的生成 package.json (npm install) 生成一个插件的依赖列表,方便于
你日后与别人或者自己通过 npm install 进行下载
{
"name": "webpack_tech",
"version": "1.0.0",
"description": "webpack ---> why?",
"main": "readme.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p",
"watch": "webpack -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.14.0"
}
}
npm install webpack --save-dev 把webpack下载到当前文件夹目录中
调用:
node_modules/.bin/webpack
npm run build
使用?
对 webpack.config.js 进行配置
var webpack = require('webpack'); //加载webpack模块
//进行一定的配置
module.exports = {
entry: {
//入口js文件
app_gyf: './index.js'
},
output: {
//入口js文件,在经过webpack处理之后,你希望它输出到哪个目录下
path: './build', //发布目录
filename: '[name].js'
}
}
/*//压缩打包之后 js代码*/
压缩: webpack -p
监听改变: webpack -w
index.js
var Hello = require('./Components/hello.js') //模块化的加载
var b = require('./Components/b.js') //加载我们b模块
// Hello ? <div>Hello world</div>
document.body.appendChild(Hello);
console.log(123);
console.log(b.name);
b.say();
b.js
var name = 'I am Body'
function sayName(){
console.log('说出我的名字', name);
}
module.exports = {
name: 'I am B',
say: sayName
}
对js进行处理。
在处理js的时候,比css 要复杂的多, 与css相比, js的执行,存在相互依赖关系
比如 a.js的执行 需要依赖b.js的加载
a.js + b.js(错了) b.js --> a.js (对的)
也就是说,在处理js的时候,要处理好js相互依赖的关系,就可以对js进行文件合并、压缩
如何处理js加载的相互依赖关系? 2大规范
1. CMD ---> CommonJs Modules Definition
2. AMD ----> Asynchronous Module Definition
console.log(1);
setTimeout(function(){
console.log(2);
//回调函数 callback: 当一个函数作为一个形参传递给另外一个函数的时候,该函数就称为回调函数
console.log(3); //异步编程的特点: 代码的顺序需要靠 回调函数去维持
}, 0)
webpack 2大规范 它都支持
安装 webpack?
npm init -y; --> 自动的生成 package.json (npm install) 生成一个插件的依赖列表,方便于
你日后与别人或者自己通过 npm install 进行下载
{
"name": "webpack_tech",
"version": "1.0.0",
"description": "webpack ---> why?",
"main": "readme.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p",
"watch": "webpack -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.14.0"
}
}
npm install webpack --save-dev 把webpack下载到当前文件夹目录中
调用:
node_modules/.bin/webpack
npm run build
使用?
对 webpack.config.js 进行配置
var webpack = require('webpack'); //加载webpack模块
//进行一定的配置
module.exports = {
entry: {
//入口js文件
app_gyf: './index.js'
},
output: {
//入口js文件,在经过webpack处理之后,你希望它输出到哪个目录下
path: './build', //发布目录
filename: '[name].js'
}
}
/*//压缩打包之后 js代码*/
压缩: webpack -p
监听改变: webpack -w
index.js
var Hello = require('./Components/hello.js') //模块化的加载
var b = require('./Components/b.js') //加载我们b模块
// Hello ? <div>Hello world</div>
document.body.appendChild(Hello);
console.log(123);
console.log(b.name);
b.say();
b.js
var name = 'I am Body'
function sayName(){
console.log('说出我的名字', name);
}
module.exports = {
name: 'I am B',
say: sayName
}
相关文章推荐
- Webpack安装extract-text-webpack-plugin遇见的两个问题
- 当ArcGIS API for JavaScript遇见Webpack(一)
- 当ArcGIS API for JavaScript遇见Webpack(二)
- [webpack]我所遇见的bug:[babel] note:the code generator has deoptimised the styling...
- ReactJS学习系列课程(React webpack使用)
- Appcan+vue+vux+webpack开发app(原创)
- webpack进阶--loader
- 入门Webpack,看这篇就够了
- webpack
- webpack入门使用笔记
- webpack sourcemap 选项多种模式的一些解释
- webpack-manifest-plugin
- webpack创建js
- webpack如何与react进行配合
- 先学习学习: Fine-Tune Your Web Site for Windows XP Service Pack 2
- Webpack vs Browersify vs SystemJs for SPAs
- Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式
- webpack的安装和配置
- 从Npm Script到Webpack,6种常见的前端构建工具对比
- ASPWebPack在线压缩,算是比较有用的工具