一、认识webpack webpack是一款模块打包加载工具。它能够将各种资源、JS、CSS、图片等作为模块打包加载。本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正。二、安装webpack ...
一、认识webpack
webpack是一款模块打包加载工具。它能够将各种资源、JS、CSS、图片等作为模块打包加载。本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正。
二、安装webpack
这里安装webpack的前提是已经安装的node.js和npm。下面进行webpack的全局安装:
$ npm webpack install -g
三、相关配置
每个使用webpack的项目必须有一个webpack.config.js文件。先上代码。下面是我在本次项目中编写的webpack.config.js文件:
1 var path = require('path') 2 var webpack = require('webpack') 3 var fs = require('fs'); 4 var dir = './client/develop/view'; 5 var readDir = fs.readdirSync(dir); 6 var entry = { 7 vendor: ['babel-polyfill','react','redux'] 8 }; 9 readDir.forEach(v => {10 v = v.replace(/\.js$/, '');11 entry[v] = dir + '/' + v;12 });13 14 module.exports = {15 entry: entry,16 output: {17 path: path.join(__dirname, 'client', 'dist', 'js'),18 filename: '[name].bundle.js',19 publicPath: '/js/'20 },21 plugins: [22 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),23 new webpack.DefinePlugin({24 "process.env": {25 NODE_ENV: JSON.stringify("production")26 }27 })28 ],29 module: {30 loaders: [31 {32 test: /\.js$/,33 // loaders: ['babel?optional=runtime'],34 loaders: ['babel?presets[]=es2015&presets[]=react'],35 exclude: /node_modules/,36 include: __dirname37 }, {38 test: /\.css$/,39 loader: "style-loader!css-loader"40 },41 {42 test:/\.json$/,43 loader:'json'44 },45 // Optionally extract less files46 // or any other compile-to-css language47 {48 test: /\.less$/,49 loader: "style-loader!css-loader!less-loader"50 }51 ]52 }53 }
原标题:webpack入门学习
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。