设置如下:
package.json:
{
"dependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
webpack.config.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './1.js',
output: {
path: 'dist',
filename: 'bundle.js',
},
module: {
loaders: [
{test: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template.ejs',
}),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.UglifyJsPlugin(),
],
devtool: 'source-map',
};
template.ejs:
<!doctype html>
<html>
<body>
<div></div>
</body>
</html>
1.js:
require('./1.sass');
1.sass:
body
background: #ddd
div
width: 100px
height: 100px
margin: auto
background: #333
然后
$ rm -rf dist/* && ./node_modules/.bin/webpack
并在 Chrome 中打开 http://example.com/dist。然后转到开发人员工具 > 元素选项卡。单击 div，然后单击 div { width: 100px; 的链接； ... } block 。您会发现自己位于第 2 行。但是，当您注释掉 new webpack.optimize.UglifyJsPlugin() 行时，您将位于第 3 行，正如预期的那样。我做错了什么？
最佳答案
首先要提到的是 UglifyJsPlugin switches所有加载程序进入最小化模式。来自 the docs :
Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode.
但值得庆幸的是它在 coming 中进行了更改2.x version .
另一个问题是 libsass 生成 wrong source map ，当 outputStyle 被压缩时。当您不指定时 outputStyle 会被压缩 explicitly并且缩小已打开。
因此，目前的解决方法是指定除 compressed 之外的一些 outputStyle:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './1.js',
output: {
path: 'dist',
filename: 'bundle.js',
},
module: {
loaders: [
{test: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},
]
},
sassLoader: {
outputStyle: 'nested',
},
plugins: [
new HtmlWebpackPlugin({
template: 'template.ejs',
}),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.UglifyJsPlugin(),
],
devtool: 'source-map',
};
UPD 似乎最有可能的 source-map 也存在问题。包和css-loader包裹。因此，您可能会考虑禁用缩小，例如:css?sourceMap&-minimize。
关于javascript - 如何使 webpack 的 uglifyjs 插件不破坏 sass 的源映射？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40724467/