var path = require('path'); // NodeJS中的Path對象,用於處理目錄的對象,提高開發效率。 // 模塊導入 module.exports = { // 入口文件地址,不需要寫完,會自動查找 entry: './src/main', // 輸出 output: { path: path.join(__dirname, './dist'), // 文件地址,使用絕對路徑形式 filename: '[name].js', //[name]這里是webpack提供的根據路口文件自動生成的名字 publicPath: '/dist/' // 公共文件生成的地址 }, // 服務器配置相關,自動刷新! devServer: { historyApiFallback: true, hot: false, inline: true, grogress: true, }, // 加載器 module: { // 加載器 loaders: [ // 解析.vue文件 { test: /\.vue$/, loader: 'vue' }, // 轉化ES6的語法 { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, // 編譯css並自動添加css前綴 { test: /\.css$/, loader: 'style!css!autoprefixer'}, //.scss 文件想要編譯,scss就需要這些東西!來編譯處理 //install css-loader style-loader sass-loader node-sass --save-dev { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, // 圖片轉化,小於8K自動轉化為base64的編碼 { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}, //html模板編譯? { test: /\.(html|tpl)$/, loader: 'html-loader' }, ] }, // .vue的配置。需要單獨出來配置 vue: { loaders: { css: 'style!css!autoprefixer', html:'html-loader' } }, // 轉化成es5的語法 babel: { presets: ['es2015'], plugins: ['transform-runtime'] }, resolve: { // require時省略的擴展名,如:require('module') 不需要module.js extensions: ['', '.js', '.vue'], // 別名,可以直接使用別名來代表設定的路徑以及其他 alias: { filter: path.join(__dirname, './src/filters'), components: path.join(__dirname, './src/components') } }, // 開啟source-map,webpack有多種source-map,在官網文檔可以查到 devtool: 'eval-source-map' };