安装以及操作流程
npm install webpage -g 全局安装webpage
webpage -help 帮助命令
过程:
cd 进入文件里面
mkdir 文件名字-webpage 创建文件名字
cd 文件名字-webpage 再次进入项目根目录
npm init 创建项目的配置文件 (也就是在项目的根目录下生成一个json)
ls 项目本地
npm install webpage save dev 项目本地再次安装webpage,保存到项目开发依赖里面
hbuilder ./ 打开编辑器
pwd 查看所在目录
webpage 原来的文件.js 打包之后新生成的文件.js (打包之后生成的文件.js,就是页面需要引入的文件)
open index.html 打开浏览器
2. common.js 模块化
module.exports = "mihao.net" 设置或者叫导出这段文字
var name = require("./name") --->文件所在路径 引入这个模块
3. loader 资源引入 (比如说在JS里面引入CSS,THML,JSON等等)
npm install css loader style loader save dev 使用前先安装资源
在原来的js文件中用common.js引入
require("./style.css") 引入原 js 根目录下的 css 文件
require("style!css!./style.css") 使用 loader 让 css 资源加载到 js 里面
4. webpage 的配置文件:webpage.config.js
在项目的根目录创建 webpage.config.js 文件
配置文件内容:
http://jspang.com/2016/11/24/webpack/
http://blog.allenm.me/2012/12/whats-sourcemap/
webpack
1.安装node npm
2 安装 webpack 、
npm install -g webpack
3. 检查成功 webpack
4 在项目的根目录建立配置文件 mkdri webpack.config.js
5 配置文件
在bundle.js中
module.exports={
entry:"./index.js", //入口文件
output:{
filename:"./bundle.js"
}
}
6.配置成功后 命令行webpack
7 安装server 预览文件
npm install live-server -g
8 运行页面
live-server
多入口文件
module.exports={
entry:{
bundle1:'./main1.js',
bundle2:'./main2.js'
},
output:{
filename:'[name].js'
}
};
Css-loader
***只是在index.html文件中引入bunder.js文件 并没有引入css文件***
1.进入项目根目录 npm init 初始化 生成package.json
2. npm install style-loader --sav-dev
3. npm install css-loader --sav-dev
4 打包 webpack
5. 启动服务器 live-server
Img-loader
1. npm install url-loader --sav-dev
2. npm install file-loader --sav-dev
Uglify-js压缩
1.进入项目根目录 npm init
2. npm install --sav-dev
复制代码
转载于:https://juejin.im/post/5c93655ee51d45030904de47