@1002522146
2017-09-04T05:45:32.000000Z
字数 4001
阅读 506
项目构建
How to use image
创建一个简单的应用grunt_test
|- build----------构建生成的文件所在的文件夹
|- src------------源码文件夹
|- js---------------js源文件夹
|- css--------------css源文件夹
|- index.html-----页面文件
|- webpack.config.js---webpack配置文件(注意首字母大写)
|- package.json---项目包配置文件
{
"name": "grunt_test",
"version": "1.0.0"
}
初始化项目: package.json
{
"name": "webpack_test",
"version": "1.0.0"
}
安装webpack
npm install webpack@1 -g //全局安装
npm install webpack@1.13 --save-dev //局部安装
开始编译
创建入口src/js/ : entry.js
document.write("entry.js is work");
创建主页面 build/: index.html
<script type="text/javascript" src="js/build.js"></script>
编译js
webpack src/js/entry.js build/js/build.js
创建第二个js: src/js/content.js
module.exports = " <br> It works from content.js";
更新入口js : entry.js
* document.write("entry.js is works.");
* document.write(require("./content.js"));
编译js:
webpack src/js/entry.js build/js/build.js
安装样式的loader
npm install css-loader style-loader --save-dev
创建样式文件: src/css/test.css
body {
background: red;
}
更新入口js : entry.js
+ require("style-loader!css-loader!../css/test.css");
* document.write("entry.js is works.");
* document.write(require("./content.js"));
编译js, 并查看页面效果
webpack src/js/entry.js build/js/bundle.js
更新入口js : entry.js
- require("style-loader!css-loader!./test.css");
+ require("./test.css");
编译:
webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader
创建webpack.config.js
module.exports = {
entry: "./src/js/entry.js",//入口路径配置
output: {//出口配置
path: __dirname + '/build/js',//输出路径
filename: "bundle.js"//输出文件名
},
module: {
loaders: [//模块加载器配置
{ test: /\.css$/, loader: "style!css"} //所有css文件声明使用css-loader和style-loader加载器
]
}
};
编译
webpack
webpack --progress //编译显示进度
自动编译
webpack --watch //编译并启动监视(但需要刷新浏览器)
浏览器自动刷新(热加载)----解决手动刷新浏览器问题
npm install webpack-dev-server@1 -g
webpack-dev-server
访问: http://localhost:8080/webpack-dev-server/
; http://localhost:8080
!!!发现问题----访问的是文件夹路径而不是页面
devServer:{
contentBase: './build',//内置服务器动态加载页面所在的目录
historyApiFallback:true,//不跳转
inline:true
}
contentBase : 默认webpack-dev-server为根文件夹提供内置的服务,如果其他目录下的文件
提供服务需要在此设置目录(我们设置为build文件夹)
historyApiFallback : 开发单页面的时候非常有用,它依赖于H5的 history API,当
设置为true的时候所有的跳转都指向index.html;
port:可以设置端口号,不设置时候默认为 8080
inline : 设置为true的时候回自动刷新(有的版本需要配合hot : true使用)
webpack-dev-server
访问: http://localhost:8080
问题:页面没有热加载,自动刷新,因为index的src引入的硬盘中的build文件而不是webpack-dev-server服务器内存中的build
特点:
自动编译并刷新界面
不生成编译后的文件, 直接在内存中编译处理, 并启动服务器运行项目
安装依赖的loader
npm install url-loader file-loader --save-dev
url-loader比file-loader功能更加完善是对file-loader的上层封装
添加config中loader的配置
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } //如果图片小于limit就会进行Base64编码
定义引用图片的样式: test.css
#box1{
background-image: url(../img/logo.jpg);
height: 200px;
width: 200px;
}
#box2{
background-image: url(../img/big.jpg);
height: 200px;
width: 200px;
}
在页面引用样式或图片: index.html
<div id="box1"></div>
<div id="box2"></div>
编译并浏览
webpack-dev-server
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
npm start: 编译运行项目
npm build: 编译打包
最终 webpack.config.js 代码如下
module.exports = {
entry: "./src/js/entry.js",//入口文件
output: {
path: __dirname + '/build/js',//__dirname == ./
publicPath : './js/',//webpack的文件的绝对路径 将替代文件中引用的相对路径
filename: "build.js"//打包生成的文件名字
},
module: {
loaders: [//模块加载器
{ test: /\.css$/, loader: "style-loader!css-loader" },//css的loader
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" }//图片,文件的loader
]
},
devServer:{
contentBase: './build',//内置服务器动态加载页面所在的目录
historyApiFallback:true,//不跳转
inline:true,
port:4000
}
};