webpack js css分離
阿新 • • 發佈:2018-12-20
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');