0
출력 묶음을 축소해야만 때까지 typescript와 완벽하게 작동하는 webpack 구성이 있습니다. 나는 점진적으로 typescript로 업데이트되고있는 프로젝트를 가지고있다. 현재 하나의 파일은 typescript로 옮겨졌고 바벨 노드와 내 dev 번들 (jgl을 축소하기 위해 Uglify를 사용하지 않는다)을 실행할 때 제대로 작동한다. Webpack을 사용하여 Typescript 파일을 Uglify하는 방법
const config = {
context: ROOT,
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [
ROOT
],
query: {
cacheDirectory: DEBUG,
babelrc: false,
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
'transform-runtime',
[
'react-css-modules',
{
context: ROOT,
generateScopedName: CSS_SCOPE_NAME
}
],
'transform-decorators-legacy',
...DEBUG ? [] : [
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements'
],
],
},
},
{
test: /\.css/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({
sourceMap: DEBUG,
modules: true,
importLoaders: 1,
localIdentName: CSS_SCOPE_NAME,
minimize: !DEBUG,
})}`,
'postcss-loader?pack=default',
],
},
{
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
'postcss-loader?pack=sass',
'sass-loader',
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
},
},
],
},
resolve: {
root: ROOT,
modulesDirectories: ['node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.ts', '.tsx'],
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
errorDetails: true
}
};
const clientConfig = _.merge(true, {}, config, {
entry: './client.js',
output: {
filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
},
target: 'web',
plugins: [
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
new AssetsPlugin({
path: path.resolve(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
...DEBUG ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
warnings: VERBOSE,
},
}),
new webpack.optimize.AggressiveMergingPlugin(),
],
],
devtool: DEBUG ? 'source-map' : false,
});App.ts는 다음과 같습니다 :
이 내 웹팩 설정이ERROR in main.ab0b2e37030c63351bb8.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./components/App.ts:12,0]
입니다 : 내 자극 번들을 실행하지만, 곧, 나는 다음과 같은 오류가 발생합니다
import * as React from 'react';
import { PropTypes } from 'react';
import { connect } from 'react-redux';
const ContextType = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
insertCss: PropTypes.func.isRequired,
};
class App extends React.Component<any, any> {
static propTypes = {
context: PropTypes.shape(ContextType).isRequired,
children: PropTypes.element.isRequired,
};
static childContextTypes = ContextType;
constructor(props: any) {
super(props);
}
getChildContext() {
return this.props.context;
}
render() {
return React.Children.only(this.props.children);
}
}
export default App
왜 TS 파일을 uglify하려고합니까? 내가 누락 된 것이 아니라면 생성하는 JS를 uglifying해야합니까? –
그래, 그게 내가하고 싶은 일이야 - 그것이 생성하는 JS를 uglify. 왜 타이프 스크립트 파일을 처음부터 uglify하려고하는지 모르겠습니다. – asuna
슬프게도 WebPack을 모르므로 구성 파일 메이트에 오류가 있는지 확실하지 않습니다. 다행히도 WebPack을 아는 사람이 찾아와 도움을 줄 수 있기를 바랍니다. –