我想将我的项目与Webpack集成。在我们使用EJS模板之前，我们只想将静态资产（如CSS和JavaScript）附加到body标记中。但是当我使用EJS加载器时，生成的EJS文件还有其他东西，如模块导出等。如何删除它？
以下是我的Webpack配置：
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextPlugin = require('extract-text-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var bowerWebpackPlugin = require("bower-webpack-plugin")
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
var frontend, path, version, output,settings,views;
version = '1.0';
path = require('path');
settings = require('./config/defaultSettings')
frontend = settings.fileStructure.frontend
output = settings.fileStructure.output
views = settings.fileStructure.views
module.exports = function makeWebpackConfig () {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
* Should be an empty object if it's generating a test build
* Karma will set this when it's a test build
*/
config.entry = isTest ? {} : {
app: path.join(frontend,'/js/app.js'),
vendor: ['jquery', 'angular'],
controller: path.join(frontend,'/js/controller/controller.js'),
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
* Should be an empty object if it's generating a test build
* Karma will handle setting it up for you when it's a test build
*/
config.output = isTest ? {} : {
// Absolute output directory
path: output,
// Output path from the view of the page
// Uses webpack-dev-server in development
//publicPath: isProd ? '/' : 'http://localhost:8080/',//TODO which server
// Filename for entry points
// Only adds hash in build mode
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isTest) {
config.devtool = 'inline-source-map';
} else if (isProd) {
config.devtool = 'source-map';
} else {
config.devtool = 'eval-source-map';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
// Initialize module
config.module = {
preLoaders: [],
loaders: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development.
loader: isTest ? 'null' : extractTextPlugin.extract('style', 'css?sourceMap!postcss')
}, {
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
}, {
test: /\.ejs$/,
loader: "ejs-loader"
},
{
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw'
}]
};
// ISPARTA LOADER
// Reference: https://github.com/deepsweet/isparta-loader
// Instrument JS files with Isparta for subsequent code coverage reporting
// Skips node_modules and files that end with .test.js
if (isTest) {
config.module.preLoaders.push({
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'isparta-instrumenter'
})
}
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer
* Add vendor prefixes to your css
*/
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [];
// Skip rendering index.html in test mode
if (!isTest) {
// Reference: https://github.com/ampedandwired/html-webpack-plugin
// Render index.html
config.plugins.push(
new htmlWebpackPlugin({
//template: 'frontend/1.0/views/login.ejs',
template: 'ejs!'+path.join(views,'login.ejs'),
filename: 'views/login.ejs',
publicPath:'winston.peng',//TODO how to use?
//chunks: ['app'],
inject: 'body'
}),
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files
// Disabled when in test mode or not in build mode
new extractTextPlugin('[name].[hash].css', {disable: !isProd})
)
/*config.plugins.push(
new htmlWebpackPlugin({
template: 'ejs!'+views+'/index.ejs',
filename: 'views/index.ejs',
inject: 'body'
}),
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files
// Disabled when in test mode or not in build mode
new extractTextPlugin('[name].[hash].css', {disable: !isProd})
)*/
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin(),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
//new copyWebpackPlugin([{
// from: frontend
//}]),
//This will remove all modules in the vendor chunk from the app chunk. The bundle.js
//will now contain just your app code, without any of its dependencies. These are in vendor.bundle.js.
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
new webpack.ProvidePlugin({
_: "underscore"
}),
//Use Bower with Webpack.
new bowerWebpackPlugin({
modulesDirectories: [ path.join(frontend,'lib')],
manifestFiles: ['bower.json', 'package.json'],
includes: [/.*\.js/],
excludes: [/.*\.less/],
searchResolveModulesDirectories: true
}
)
)
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
/*config.devServer = {
contentBase: output,
stats: 'minimal'
};*/
return config;
}();
以下是生成的login.ejs：
module.exports = function (obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
with (obj) {
__p += '<!doctype html>\n<html lang="en">\n<head>\n ';
include ('./_include/header') ;
__p += '\n <style>\n div.form-group{\n margin-top:30px\n }\n .panel-success>.panel-heading{\n background-color:#5CB85C;\n }\n .panel-title{\n color:#FFFFFF;\n font-weight:bold;\n }\n\n #username:focus{\n border:solid 1px #8A9F00 !important;\n }\n form .help-block{\n text-align:left !important;\n }\n </style>\n<link href="../app.c1dfd8952df85506c04a.css" rel="stylesheet"></head>\n<body>\n<div class="bf-docs-container bodyWrapper">\n <div class="row" style="text-align:center;margin-top:100px !important;">\n <div class="col-md-offset-3 col-md-6">\n <div class="panel panel-success alignCenter ">\n <div class="panel-heading">\n <h3 class="panel-title" style="text-align:center;">朗琴管理系统登录</h3>\n </div>\n <div class="panel-body">\n <form class="form form-horizontal" name="loginForm" action="/console/login" method="post">\n <div class="form-group">\n <label for="username" class="col-lg-2 control-label">用户名<span class="required">*</span></label>\n <div class="col-lg-10">\n <input style="width:90%;" ng-model="username" class="form-control form-control-square" id="username" name="username" placeholder="请输入您的登陆账号">\n </div>\n </div>\n <div class="form-group">\n <label for="password" class="col-lg-2 control-label">密 码<span class="required">*</span></label>\n <div class="col-lg-10">\n <input style="width:90%;" required class="form-control form-control-square" name="password" type="password" placeholder="请输入密码">\n </div>\n </div>\n <div class="form-group" style="color:#FF0000;text-align: left">\n <div class="col-lg-2"></div>\n <div class="col-lg-10">' +
__e(modelMap==null?"":modelMap.message) +
'</div>\n </div>\n <div class="form-group">\n <div class="col-lg-offset-2 col-lg-10">\n <button type="submit" class="form-control btn btn-success" style="width:60%;float:left">登录</button>\n <!--<div style="line-height:34px;float:left"> 或 </div>\n <a href="/findpwd" style="line-height:34px;float:left">忘记密码？</a>-->\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n</div>\n<script type="text/javascript" src="../vendor.bundle.js"></script><script type="text/javascript" src="../controller.c1dfd8952df85506c04a.js"></script><script type="text/javascript" src="../app.c1dfd8952df85506c04a.js"></script></body>\n</html>';
}
return __p
}
我只想将静态资源附加到body标记中，而不做任何其他事情。
感谢任何帮助。