首页 > 代码库 > webpack配置
webpack配置
webpack.config.js 配置
var webpack = require(‘webpack‘); var path = require(‘path‘); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require(‘html-webpack-plugin‘); var CleanPlugin = require(‘clean-webpack-plugin‘); //清理文件夹 // css autoprefix 自动给 css 添加浏览器内核前缀 var precss = require(‘precss‘); var autoprefixer = require(‘autoprefixer‘); const glob = require(‘glob‘); // 注入所有src下以 -index.jsx结尾的文件 const files = glob.sync(‘./src/js/*.js‘); const newEntries = files.reduce(function (memo, file) { // const name = path.basename(file, ‘.jsx‘); const name = file.replace(‘./src/js/‘, ‘‘).replace(‘.js‘, ‘‘); memo[name] = file; return memo; }, {}); const entry = Object.assign({}, { index: [ ‘webpack-dev-server/client?http://localhost:8000‘, ‘webpack/hot/only-dev-server‘, ‘./src/js/index.js‘ ], lib:[ // 打包合并公共部分(公共资源与单文件分开打包) ‘react‘, ‘react-dom‘ ] }, newEntries); module.exports = { //页面入口文件配置 entry:entry, // entry: { // index: [ // ‘webpack-dev-server/client?http://localhost:8000‘, // ‘webpack/hot/only-dev-server‘, // ‘./src/js/index.js‘ // ], // lib:[ // 打包合并公共部分(公共资源与单文件分开打包) // ‘react‘, ‘react-dom‘ // ], // index:‘./src/js/index.js‘, // compnent:[‘./src/js/compnent/pageb.js‘,‘./src/js/lib/common.js‘], // module1:‘./src/module1/module1.js‘, // module2:‘./src/module2/module2.js‘, // }, //入口文件输出配置 output: { path: __dirname + ‘/dist/‘, filename: ‘js/[name].js‘, chunkFilename: "[id].js" }, module: { // preLoaders:[{ // test: /\.(jsx|js)$/, // loader: ‘eslint-loader‘, // exclude: /node_modules/ // }], //加载器配置 loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader"}) // css-loader 用于将 css 当做模块一样来 import style-loader 用于自动将 css 添加到页面 }, { test: /\.less$/, loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader!less-loader"}) }, { test: /\.js$/, loader: ‘jsx-loader?harmony‘ }, //{ test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘}, { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘ }, { test: /\.js|jsx$/, loaders: [‘babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0‘] }, { test: /\.json$/, loader: ‘json‘ }, { test: /\.html$/, loader: ‘html?interpolate‘ }, { test: /\.js|jsx$/, loaders: [‘react-hot‘, ‘babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0‘], include: path.join(__dirname, ‘js‘) }, { test: /\.(jsx|js)$/, loader: ‘eslint-loader‘, exclude: /node_modules/ }, { test: /\.(?:jpg|gif|png|svg)$/, loaders: [ ‘url?limit=8000&name=img/[hash].[ext]‘, ‘image-webpack‘ ] } ] }, //其它解决方案配置 resolve: { extensions: [‘.js‘, ‘.jsx‘,‘.json‘, ‘.scss‘ , ‘.css‘, ‘.less‘] }, //插件项 plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新 new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: ‘lib‘, filename: ‘js/common/lib.js‘ }), // 打包公共资源 new ExtractTextPlugin("css/[name].css"), // 打包css文件 new HtmlWebpackPlugin({ // 生成html,将js及css等静态资源自动引入html,压缩html文件 filename: ‘index.html‘, //chunks: [‘src‘, ‘moudle1‘], minify: { collapseWhitespace: true, collapseInlineTagWhitespace: true, removeRedundantAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, removeComments: true }}), new webpack.optimize.UglifyJsPlugin({ // 压缩js,css资源 compress: { // sourceMap: true, warnings: false } }), //清空输出目录 new CleanPlugin([‘dist‘], { "root": path.resolve(__dirname, ‘./‘), verbose: true, dry: false }), ], //eslint 检查 // eslint: { // configFile: ‘./.eslintrc‘ // } };
webpack配置
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。