1. 程式人生 > >webpack js css分離

webpack js css分離

 const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
module.exports = {
    mode: "development", //打包為開發模式
    entry: "./app/main.js", //入口檔案,從專案根目錄指定
    output: { //輸出路徑和檔名,使用path模組resolve方法將輸出路徑解析為絕對路徑
        path: path.resolve(__dirname, "./dist/js"), //將js檔案打包到dist/js的目錄
        filename: "qmframe.js" 
    },
    module: {
	    rules: [
	      {
	        test: /\.css$/,
	        use: ExtractTextPlugin.extract({
	          fallback: "style-loader",
	          use: "css-loader"
	        })
	      },
		  {
               test: /\.(gif|png|jpg|woff|svg|ttf|eot)\??.*$/,
			 loader: {
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: './resource/[name].[ext]'
                }
            }
			
 
		  }		  
	    ]
		 
 
  },
  plugins: [
    new ExtractTextPlugin("./qmstyles.css") //預設其實目錄問打包後的入口檔案路徑,所以需要../
  ]
}
 

 

require('./bootstrap.min.css');
require('./font-awesome.min.css');
require('./qm.loading.css');
require('./alert.css');
jquery=require('./jquery-3.3.1.min.js');
$=jquery;
jQuery=jquery;
require('./bootstrap.bundle.min.js');

jqueryAlert=require('./alert.js');
require('./qm.jquery.blockUI.js');
require('./layer.js');
require('./layui.js');