webpack使用理解

2016-07-22 本文已影响194人麦子_FE

*安装

进入到你的项目将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') ],

webpack使用理解

猜你喜欢

热点阅读