webpack webpack:是近的一加载器兼打包工具，它能把各种资源，例如J (含J X)、 coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
一、全局安装webpack：
```
npm install webpack -g
```
二、编写webpack.config.js配置文件
```
// CommonJS
//导出模块
//下方的内容不需要改变
module.exports = {
entry: __dirname + 'app/index.js', //入口文件
output: {
//输出目录
path: __dirname + 'build', // 输出路径
filename: 'bundle.js', // 输出文件名
},
//引入css文件
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true
};
```
三、写我们的helloworld组件：module.exports=function(){}
```
//自己随便写的一些内容，注意是js文件
console.log("我是module.js 文件");
var a = "我是aa变量";
var fn = function () {
console.log("我是fn函数");
}
module.exports = {
a,
fn
}
```
四、index.js主入口引入：
```
//在app文件夹下，主要用来引入其他我们自己编译的js文件或者css文件
var component = require('./component.js'); document.body.appendChild(component());
```
五、新建index.html引入bundle.js,运行index.html
```
配置快速启动webpack：package.json里的scripts:{“start”:”webpack”}
```
六、构建本地服务器：
```
1.安装：npm install --save-dev webpack-dev-server
2.配置webpack.config.js文件
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
3.在package.json中的scripts对象中添加如下命令，用以开启本地服务器
"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
//"server": "webpack-dev-server --open"
"dev": "webpack-dev-server --open"
},
```
七、loader,cssloader（Css样式加载：）
1、要安装依赖
```
npm install style-loader css-loader --save
```
2、配置文件(webpack.config.js)中加入配置：module(内部，与之前加入的js同级):
```
{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
}
```
完成上述步骤，我们只需要在app文件夹下写css文件和js文件就好了。
自己写的结构目录：
###依次给大家展示配置完成之后的代码：
1、app文件夹下的index.css(自己写的css样式文件)
```
h1{
color: red;
}
```
2、app文件夹下的index.js（引入各种文件的主入口）
```
//console.log("我是index.js 文件");
//用require引入各种css和js文件
var res = require("./module.js");
require("./index.css");
//console.log(res.a);
//调用module.js文件里的函数
res.fn();
```
3、app文件夹下的module.js(自己写的js文件)
```
console.log("我是module.js 文件");
var a = "我是aa变量";
var fn = function () {
console.log("我是fn函数");
}
//固定写法，必须用module.exports={}
module.exports = {
a:a,
fn:fn
}
```
4、build文件夹下的bundle.js
```
这个文件是我们安装webpack自动生成的js文件，我们只需要把它放在build文件夹下即可，里面的代码不需要改变，就不给大家展示代码了。
```
5、build文件夹下的index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//这里就是之前说的引入bundle.js文件，而不是直接link我们的CSS文件或者自定义的js文件
<script src="bundle.js"></script>
</head>
<body>
<h1>哈哈哈哈</h1>
</body>
</html>
```
6、直接在webpack下与app文件夹同级的package.json文件
```
{
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1"
},
//这里的scripts需要我们手动配置，照着下面的一样复制上就ok。
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
```
7、直接在webpack下与app文件夹同级的webpack.config.js文件
```
module.exports = {
//当前执行文件的路径
entry:__dirname+"/app/index.js",
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
watch:true,
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
```
到这里，一个完整的webpack就配置完成了。
一、全局安装webpack：
```
npm install webpack -g
```
二、编写webpack.config.js配置文件
```
// CommonJS
//导出模块
//下方的内容不需要改变
module.exports = {
entry: __dirname + 'app/index.js', //入口文件
output: {
//输出目录
path: __dirname + 'build', // 输出路径
filename: 'bundle.js', // 输出文件名
},
//引入css文件
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true
};
```
三、写我们的helloworld组件：module.exports=function(){}
```
//自己随便写的一些内容，注意是js文件
console.log("我是module.js 文件");
var a = "我是aa变量";
var fn = function () {
console.log("我是fn函数");
}
module.exports = {
a,
fn
}
```
四、index.js主入口引入：
```
//在app文件夹下，主要用来引入其他我们自己编译的js文件或者css文件
var component = require('./component.js'); document.body.appendChild(component());
```
五、新建index.html引入bundle.js,运行index.html
```
配置快速启动webpack：package.json里的scripts:{“start”:”webpack”}
```
六、构建本地服务器：
```
1.安装：npm install --save-dev webpack-dev-server
2.配置webpack.config.js文件
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
3.在package.json中的scripts对象中添加如下命令，用以开启本地服务器
"scripts": {
// "test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
//"server": "webpack-dev-server --open"
"dev": "webpack-dev-server --open"
},
```
七、loader,cssloader（Css样式加载：）
1、要安装依赖
```
npm install style-loader css-loader --save
```
2、配置文件(webpack.config.js)中加入配置：module(内部，与之前加入的js同级):
```
{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
}
```
完成上述步骤，我们只需要在app文件夹下写css文件和js文件就好了。
自己写的结构目录：
###依次给大家展示配置完成之后的代码：
1、app文件夹下的index.css(自己写的css样式文件)
```
h1{
color: red;
}
```
2、app文件夹下的index.js（引入各种文件的主入口）
```
//console.log("我是index.js 文件");
//用require引入各种css和js文件
var res = require("./module.js");
require("./index.css");
//console.log(res.a);
//调用module.js文件里的函数
res.fn();
```
3、app文件夹下的module.js(自己写的js文件)
```
console.log("我是module.js 文件");
var a = "我是aa变量";
var fn = function () {
console.log("我是fn函数");
}
//固定写法，必须用module.exports={}
module.exports = {
a:a,
fn:fn
}
```
4、build文件夹下的bundle.js
```
这个文件是我们安装webpack自动生成的js文件，我们只需要把它放在build文件夹下即可，里面的代码不需要改变，就不给大家展示代码了。
```
5、build文件夹下的index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//这里就是之前说的引入bundle.js文件，而不是直接link我们的CSS文件或者自定义的js文件
<script src="bundle.js"></script>
</head>
<body>
<h1>哈哈哈哈</h1>
</body>
</html>
```
6、直接在webpack下与app文件夹同级的package.json文件
```
{
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1"
},
//这里的scripts需要我们手动配置，照着下面的一样复制上就ok。
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
```
7、直接在webpack下与app文件夹同级的webpack.config.js文件
```
module.exports = {
//当前执行文件的路径
entry:__dirname+"/app/index.js",
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
watch:true,
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
```
到这里，一个完整的webpack就配置完成了。
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
