webpack : AngularJS 1.6.1(ES6)与SCSS封装
webpack : AngularJS 1.6.1(ES6)与SCSS封装
提问于 2017-02-03 10:59:18
有人可以帮我配置webpack以满足以下要求
- AngularJS (1.6) ES6 to ES5会话
- SCSS到CSS编译器
- 所有js到单个包
- 所有css到单个包
- 所有文件夹结构都应该只使用html创建(没有js文件，因为我们使用alrady捆绑)
这就是我迄今所尝试过的
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-21 18:31:14
webpack公司更新
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};webpack配置的样例项目发布在我的github中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42022662
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号