1. 程式人生 > >webpack 配置

webpack 配置

ostc limit dex 命令行 web 文件的 命令 try load

var webpack = require(‘webpack‘);
var path = require(‘path‘);
var autoprefixer = require("autoprefixer");
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);//css樣式從js文件中分離出來,需要通過命令行安裝 extract-text-webpack-plugin依賴包
// var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports 
= { devtool: ‘source-map‘, entry: { ‘index‘: path.join(__dirname , "src/index.js"), ‘page1‘: path.join(__dirname , "src/page1.js"), ‘vendor‘: ["jquery"] }, //已多次提及的唯一入口文件,可以打包多個文件 output: { path: path.join(__dirname , "dist"), //打包後的文件存放的地方 filename: "[name].js" //
打包後輸出文件的文件名 }, // externals: { // jquery: ‘jQuery‘ // }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!postcss-loader", publicPath:
"../" //css圖片路徑出錯 }) }, { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192&name=./images/[hash:8].[name].[ext]‘ }, { test: /\.js$/, exclude: /(node_modules)/, loader: "babel-loader" }, { test: /\.json$/, loader: "json-loader" } ] }, plugins: [ new ExtractTextPlugin({ filename: "./css/[name].css", allChunks: true }), require(‘autoprefixer‘), new webpack.optimize.CommonsChunkPlugin({ name: [‘vendor‘] // 指定公共 bundle 的名字。 }), // new HtmlWebpackPlugin({ // filename: "./public/index.html", // template: "./html/moban.html", // inject: true, // hash: true, // // minify: // }), // new webpack.optimize.UglifyJsPlugin({ // compress: { // warnings: false // } // }), ] }

webpack 配置