*安装
进入到你的项目 将webpack安装到项目的依赖中，这样就可以使用项目本地版本的webpack
npm install webpack@1.12.x--save-dev(这种格式是安装指定版本)
npm install webpack --save-dev
npm i webpack-dev-server --save
npm install react --save
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
npm i react-dom --save
*目录
index.html
js / 你的js文件
dist / 你打包的文件（也就是你JS目录下的文件打包后的文件）
手动打包方法
手动打包: webpack 源文件路径 打包路径（webpack ./entry.js ./bundle.js）//这里是没有配置webpack.config.js
$ webpack --watch //监听变动并自动打包 监视webpack.config.js 的改动$ webpack -p //压缩混淆脚本，这个非常非常重要！
*注意事项
页面要引入打包后的路径的JS文件
*loader理解
是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、 JSX、 LESS 或图片。
*暴露模块
module.exports = "It works from content.js.";//nodejs中的暴露方式
export default Girls;//ES6
*引入模块
import MyModule from './modules/MyModule.js';//es6
var MyModule = require('./MyModule.js');//commonjs
webpack require 一切
require("./content.js"); // 添加content.js
*加载CSS
安装css-loader : npm install css-loader style-loader
require("style!css!
../css/main.css")//加载CSS style!css!是声明这个模块是CSS style!css!可以不写 在loaders里面配置信息即可
import "../css/main.css";//ES6引入方式
*配置文件
webpack.config.js 以下是基本配置
单个入口文件
var path = require('path');
module.exports = {
entry: "./js/entry.js",
output: {
path: './dist',
publicPath: './dist/',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
多个入口文件
var path = require('path');
module.exports = {
entry: {
page1:["./js/entry.js","./js/double.js"]
},
output: {
path: './dist',
publicPath: './dist/',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
加载器配置
这里需要在output模块里面设置publicPath否则CSS背景图片等输出有问题
module: { //加载器配置 loaders: [ { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.js$/, loader: 'jsx-loader?harmony' }, { test: /.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] },
entry: {
page1: "./page1",//单个文件形式 支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},//数组形式 如果采用下面你的写法 不能用上面的这种
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
*暴露模块使用案例
var index={//这是添加content.js
main:function(){
var html="1111111";
return html;
}
}
module.exports=index;
//这是在另一个文件
var index=require("./content.js"); // 添加content.js
document.getElementById("box").innerHTML=index.main();
*npm install --save 与 npm install --save-dev 的区别
一个放在package.json 的dependencies , 一个放在devDependencies里面
扩展:
在package.json 设置它的scripts npm run build===webpack（这里是运行打包）
{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" }}
webpack-dev-server 自动监听（此时还不能自动刷新浏览器）ctrl+C退出服务
npm i webpack-dev-server --save
npm run dev 在http://localhost:8080监听文件修改
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
webpack-dev-server
- 在 localhost:8080 建立一个 Web 服务器
--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress - 显示合并代码进度
--colors - Yay，命令行中显示颜色！
--content-base build - 指向设置的输出目录
如果需要浏览器自动刷新你需要在配置中增加一个入口点。
在webpack.config.js
**entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, 'app/main.js') ],
**
网友评论