webpack 用法
webpack是模块加载器。webpack当中,所有的资源都被当作是模块,js css 图片等。webpack中需要加载不同的模块来处理文件。http://webpack.github.io/docs/list-of-loaders.html如jsx 需要jsx-loader模块。它支持CommonJS 和amd。需要创建一个配置文件:webpack.config.j
webpack是模块加载器。
webpack当中,所有的资源都被当作是模块,js css 图片等。
webpack中需要加载不同的模块来处理文件。
http://webpack.github.io/docs/list-of-loaders.html
如jsx 需要jsx-loader模块。
它支持CommonJS 和amd。
需要创建一个配置文件:webpack.config.js
运行:
webpack
webpack -watch 监听文件变化 自动打包但不会刷新浏览器
webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
webpack -p //压缩混淆脚本,这个非常非常重要!
webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
需要用require('')来引用各个模块,如react-addons 如jsx模块。
它们肯定需要编译的。所以webpack 提供了loader加载器来实现不同的功能。
amd模块的引用 :
define([],function(){
function fn(){
console.log('amd 规范写的模块')
};
return {
printf:fn
}
})
var add_module1=require('./add_module1.js');
add_module1.printf();
也是直接require() 然后使用。
commonjs模块引用:
exports.getname=function(){
console.log('star name');
}
//commonjs 模块引用
var comm=require('./comm_module1.js');
comm.getname();
页面里直接引用
<script src="dist/js/page/common.js"></script> <script src="dist/js/page/index.js"></script>
入口js的写法:
app.jsx:
var React = require('react/addons');
var SurveyList = require('./SurveyList.jsx');
//amd 模块引用
var add_module1=require('./add_module1.js');
add_module1.printf();
//commonjs 模块引用
var comm=require('./comm_module1.js');
comm.getname();
require('./index.css');//引用css
require('./less.less');//引用less
React.render(<SurveyList></SurveyList>, document.querySelector('#div1'));
在 AMD/CMD 中,我们需要对不符合规范的模块(比如一些直接返回全局变量的插件)进行 shim 处理,这时候我们需要使用 exports-loader 来帮忙:
loaders:
{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}脚本里的引用 :
require('./tool/swipe.js');
swipe();
自定义公共模块提取:
在文章开始我们使用了 CommonsChunkPlugin 插件来提取多个页面之间的公共模块,并将该模块打包为 common.js 。
但有时候我们希望能更加个性化一些,我们可以这样配置:
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { entry: { p1: "./page1", p2: "./page2", p3: "./page3", ap1: "./admin/page1", ap2: "./admin/page2" }, output: { filename: "[name].js" }, plugins: [ new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"]) ] };
独立打包样式文件:
有时候可能希望项目的样式能不要被打包到脚本中,而是独立出来作为.css,然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙:
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")],
也可以new ExtractTextPlugin("style.css", {allChunks: true})
这样把所有css都打包到style里,页面里只引用一个css
与grunt/gulp配合
gulp.task("webpack", function(callback) { // run webpack webpack({ // configuration }, function(err, stats) { if(err) throw new gutil.PluginError("webpack", err); gutil.log("[webpack]", stats.toString({ // output options })); callback(); }); });需要把配置文件写在webpack({})对象里。
http://webpack.github.io/docs/usage-with-gulp.html
http://webpack.github.io/docs/configuration.html
如果是通过gulp插件gulp-webpack,则可以在gulpfile中写上gulp任务:
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config');
gulp.task("webpack", function() {
return gulp
.src('./')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./build'));
});
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)